JavaScript中call、apply和bind方法的异同与模拟实现

总结

1、相同点

1. 它们都能改变目标函数在执行时内部this的指向。
2. 这些方法的第一个参数用于指定函数执行时内部的this值。
3. 它们都支持向目标函数传递任意数量的参数。
4. 如果不向方法的第一个参数传值，或者传递undefined、null，在JavaScript正常模式下，目标函数内部的this将指向window对象；而在严格模式下，则分别指向undefined和null。

2、区别

1. apply()方法仅接收两个参数，而call()和bind()方法则可以接收多个参数。
2. 当向目标函数传递参数时，apply()方法只需将参数数组或arguments对象作为方法的第二个参数即可；而call()和bind()方法则需要将传参逐个列举在方法的一个参数后面。
3. 调用call()和apply()方法时会立即执行目标函数，而bind()方法则不会，它将返回一个新函数——目标函数的拷贝，该函数内部的this指向bind()方法的第一个参数，之后执行新函数相当于执行了目标函数。
4. 只有bind()方法实现了函数柯里化，因此可以分两次向目标函数传递参数。

call()方法

1. 调用call()方法会立即执行目标函数，同时改变函数内部this的指向。this指向由方法的第一个参数决定，后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。
2. 对于开头总结中相同点的最后一点，示例如下：

/* 正常模式 */

let obj = {
  sum(a, b) {
    console.log(this)
    return a + b
  }
}

// 执行 sum 函数的 apply、bind 方法，打印的 this 同下
obj.sum.call()  // 打印 window
obj.sum.call(undefined, 1, 2)  // 打印 window
obj.sum.call(null, 1, 2)  // 打印 window

/* 严格模式 */
'use strict'

// 执行 sum 函数的 apply、bind 方法，打印的 this 同下
obj.sum.call()  // 打印 undefined
obj.sum.call(undefined, 1, 2)  // 打印 undefined
obj.sum.call(null, 1, 2)  // 打印 null

模拟实现

1、关键点

1. myCall()方法被添加在Function原型对象上，目标函数调用该方法时，myCall()方法内部的this将指向目标函数。
2. 将目标函数作为context对象的方法来执行，由此目标函数内部的this将指向context对象。
3. 从context对象中删除目标函数
4. 使用扩展运算符...处理传入目标函数的参数

2、call()、apply()、bind()方法的模拟实现中，对于不传第一个参数或者传递undefined、null时，这里在JS正常模式和严格模式下做了统一处理，即目标函数内部的this均指向window对象。

3、代码如下

Function.prototype.myCall = function (context, ...args) {
  if (context === undefined || context === null) {
    context = window
  }
  // 下面这行为核心代码
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

let obj1 = {
  basicNum: 1,
  sum(a, b) {
    console.log(this)
    return this.basicNum + a + b
  }
}
let obj2 = {
  basicNum: 9
}
console.log(obj1.sum.call(obj2, 2, 3))  // 14
console.log(obj1.sum.myCall(obj2, 2, 3))  // 14

apply()方法

调用apply()方法会立即执行目标函数，同时改变函数内部this的指向。this指向由方法的第一个参数决定，第二个参数是一个参数数组或arguments对象，各数组元素或arguments对象表示的各参数将作为目标函数的参数一一对应传入。

模拟实现

1、关键点

1. myApply()方法被添加在Function原型对象上，目标函数调用该方法时，myApply()方法内部的this将指向目标函数。
2. 将目标函数作为context对象的方法来执行，由此目标函数内部的this将指向context对象。
3. 从context对象中删除目标函数
4. 使用扩展运算符...处理传入目标函数的参数

2、代码如下

Function.prototype.myApply = function (context, args) {
  if (context === undefined || context === null) {
    context = window
  }
  // 下面这行为核心代码
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

console.log(obj1.sum.apply(obj2, [2, 3]))  // 14
console.log(obj1.sum.myApply(obj2, [2, 3]))  // 14

bind()方法

1. 调用bind()方法将返回一个新函数——目标函数的拷贝，该函数内部的this指向方法的第一个参数，后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。之后执行新函数相当于执行了目标函数。
2. bind()方法实现了函数柯里化，因此可以分两次向目标函数传递参数，第一次的参数列举在bind()方法首参后面，第二次的参数列举在新函数中。

模拟实现

1、关键点

1. myBind()方法被添加在Function原型对象上，目标函数调用该方法时，myBind()方法内部的this将指向目标函数。
2. 将目标函数作为context对象的方法来执行，由此目标函数内部的this将指向context对象。
3. 从context对象中删除目标函数
4. 使用扩展运算符...处理传入目标函数的初始参数、后续参数。

2、代码如下

Function.prototype.myBind = function (context, ...initArgs) {
  if (context === undefined || context === null) {
    context = window
  }
  // 缓存 this 值
  const _this = this
  return function (...args) {
    // 下面这行为核心代码
    context.fn = _this
    const result = context.fn(...initArgs, ...args)
    delete context.fn
    return result
  }
}

console.log(obj1.sum.bind(obj2, 2)(3))  // 14
console.log(obj1.sum.myBind(obj2, 2)(3))  // 14

相关知识点

• 关于JavaScript中this的指向

到此这篇关于JavaScript函数之call、apply以及bind方法案例详解的文章就介绍到这了,更多相关JavaScript函数之call、apply以及bind方法内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！