ES5 function 扩展：call()、apply()、bind()详解

Function.prototype.call()

• Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) 提供新的 this 值给当前调用的函数或方法。

  • thisArg 在 fun 函数运行时指定的 this 值。需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数在非严格模式下运行，则指定为 null 和 undefined 的 this 值会自动指向全局对象。
  • arg1, arg2, ... 指定的参数列表。

  示例：

  var obj = {username: '小乔', age: 19}
  function fun(data) {
      console.log(this, data)
  }
  // 执行结果：Window{...} "test"
  fun('test') // 此时 this 指向的是 window
  // 执行结果：{username: "小乔", age: 19} "www"
  fun.call(obj, 'www') // 此时 this 的指向已改变
  

Function.prototype.apply()

• Function.prototype.apply(thisArg, [argsArray])为当前被调用的函数指定一个 this 对象。

  • thisArg 在 fun 函数运行时指定的 this 值。。。
  • argsArray 一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 fun 函数。
  • apply 与 call() 非常相似，不同之处在于提供参数的方式。

  示例：

  var obj = {username: '小乔', age: 19}
  function fun(data) {
      console.log(this, data)
  }
  // 执行结果：Window{...} "test"
  fun('test') // 此时 this 指向的是 window
  // 执行结果：{username: "小乔", age: 19} "www"
  fun.apply(obj, ['www']) // 此时 this 的指向已改变
  

Function.prototype.bind()

• Function.prototype.bind(thisArg[, arg1[, arg2[, ...]]]) 创建一个新的函数，在 bind() 被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。

  • thisArg 调用绑定函数时作为this参数传递给目标函数的值。
  • arg1, arg2... 当目标函数被调用时，预先添加到绑定函数的参数列表中的参数。
  • 返回值：返回一个原函数的拷贝，并拥有指定的this值和初始参数。

  示例：

  var obj = {username: '小乔', age: 19}
  function fun(data) {
      console.log(this, data)
  }
  // 执行结果：Window{...} "test"
  fun('test') // 此时 this 指向的是 window
  // 执行结果：{username: "小乔", age: 19} ["www"]
  fun.bind(obj, ['www'])() // 此时 this 的指向已改变
  

  注：

  • 与上面的两个方法不同，bind() 绑定完 this 不会立即调用当前函数，而是将函数返回。
  • 通常用来指定回调函数的 this 。