改变this指向的方法

847 阅读3分钟
  • 使用ES6的箭头函数
  • 在函数内部将this赋值
  • 使用apply、call、bind方法
  • new 实例化一个对象

箭头函数改变this

箭头函数本身没有this属性,在箭头函数内部使用的this指向的是函数定义时的this
箭头函数中没有this绑定,必须通过查找作用域链来决定其值,如果箭头函数被非箭头函数包含,则 this 绑定的是最近一层非箭头函数的 this,否则,thisundefined

在函数内部将this赋值

将调用函数的对象(即this)值在合适的地方保存到一个变量,如_this或者that中,在函数中使用这个_this。这样,_this就不会改变了

使用apply、call、bind

严格模式下,会将第一个参数作为函数内部的this。非严格模式下,如果第一个参数为null或者undefined,则将this指向全局。
值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象,如 String、Number、Boolean Function.prototype.bind() bind() 方法创建一个新的函数,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

function.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg

  • 调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。当使用 bind 在 setTimeout 中创建一个函数(作为回调提供)时,作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空,或者thisArgnullundefined,执行作用域的 this 将被视为新函数的 thisArg返回值

返回一个原函数的拷贝,并拥有指定的 this 值和初始参数。


Function.prototype.call()

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

function.call(thisArg, arg1, arg2, ...)

thisArg

  • 可选的。在 function 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。 返回值

使用调用者提供的 this 值和参数调用该函数的返回值(立即执行函数)。若该方法没有返回值,则返回 undefined

注意: 该方法的语法和作用与 apply() 方法类似,只有一个区别,就是 call() 方法接受的是一个参数列表,而 apply() 方法接受的是一个包含多个参数的数组


Function.prototype.apply()

apply()  方法调用一个具有给定this值的函数,以及以一个数组(或类数组对象)的形式提供的参数。

func.apply(thisArg , [ argsArray])

thisArg

  • 必选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null 或 undefined 时会自动替换为指向全局对象,原始值会被包装。

apply 和 call 和bind的区别

  • apply和call的功能基本相似,只是接收参数的格式有所区别。
  • apply接收一个包含多个参数的数组,call接收的是若干个参数列表。
  • apply和call方法在使用时,会改变this指向然后传参后立即执行函数,返回结果
  • bind方法是创建了一个新的函数,在这个被创建的新的函数中,this的指向被改变,并接收了bind传递的参数。需要另外手动调用后,函数才会被执行。

new实例化一个对象

new实例化过构造函数的过程中,会使用call方法将对象内部的this指向实例化的对象。该实例化对象的__proto__指向构造函数的原型即protitype