🎯总结

1. 相同点
   • 都能够改变目标函数执行时内部 this 的指向
   • 方法的第一个参数用于指定函数执行时内部的 this 值
   • 支持向目标函数传递任意个参数
   • 若不向方法的第一个参数传值或者传递 undefined、null，则在 JavaScript 正常模式下，目标函数内部的 this 指向 window 对象，严格模式下，分别指向 undefined、null。
2. 区别
   • apply() 方法可接收两个参数，而 call() 和 bind() 方法则可接收多个参数。
   • apply() 方法向目标函数传递参数时只需将参数数组或 arguments 对象作为方法的第二个参数即可，而 call() 和 bind() 方法则需要将传参逐个列举在方法的一个参数后面。
   • 调用 call() 和 apply() 方法时会立即执行目标函数，而 bind() 方法则不会，它将返回一个新函数——目标函数的拷贝，该函数内部的 this 指向 bind() 方法的第一个参数，之后执行新函数相当于执行了目标函数。
   • 只有 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. 关键点

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

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. 关键点

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

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. 关键点

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

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 的指向