??總結(jié)

1. 相同點(diǎn)
   • 都能夠改變目標(biāo)函數(shù)執(zhí)行時(shí)內(nèi)部 this 的指向
   • 方法的第一個(gè)參數(shù)用于指定函數(shù)執(zhí)行時(shí)內(nèi)部的 this 值
   • 支持向目標(biāo)函數(shù)傳遞任意個(gè)參數(shù)
   • 若不向方法的第一個(gè)參數(shù)傳值或者傳遞 undefined冀偶、null闲延，則在 JavaScript 正常模式下姆涩，目標(biāo)函數(shù)內(nèi)部的 this 指向 window 對(duì)象污茵，嚴(yán)格模式下，分別指向 undefined蝙昙、null闪萄。
2. 區(qū)別
   • apply() 方法可接收兩個(gè)參數(shù)，而 call() 和 bind() 方法則可接收多個(gè)參數(shù)奇颠。
   • apply() 方法向目標(biāo)函數(shù)傳遞參數(shù)時(shí)只需將參數(shù)數(shù)組或 arguments 對(duì)象作為方法的第二個(gè)參數(shù)即可败去，而 call() 和 bind() 方法則需要將傳參逐個(gè)列舉在方法的一個(gè)參數(shù)后面。
   • 調(diào)用 call() 和 apply() 方法時(shí)會(huì)立即執(zhí)行目標(biāo)函數(shù)烈拒，而 bind() 方法則不會(huì)圆裕，它將返回一個(gè)新函數(shù)——目標(biāo)函數(shù)的拷貝，該函數(shù)內(nèi)部的 this 指向 bind() 方法的第一個(gè)參數(shù)荆几，之后執(zhí)行新函數(shù)相當(dāng)于執(zhí)行了目標(biāo)函數(shù)吓妆。
   • 只有 bind() 方法實(shí)現(xiàn)了函數(shù)柯里化，因此可以分兩次向目標(biāo)函數(shù)傳遞參數(shù)吨铸。

call() 方法

1. 調(diào)用 call() 方法會(huì)立即執(zhí)行目標(biāo)函數(shù)行拢，同時(shí)改變函數(shù)內(nèi)部 this 的指向。this 指向由方法的第一個(gè)參數(shù)決定诞吱，后面逐個(gè)列舉的任意個(gè)參數(shù)將作為目標(biāo)函數(shù)的參數(shù)一一對(duì)應(yīng)傳入舟奠。

2. 對(duì)于開頭總結(jié)中相同點(diǎn)的最后一點(diǎn)竭缝，示例如下：

   /* 正常模式 */
   
   let obj = {
     sum(a, b) {
       console.log(this)
       return a + b
     }
   }
   
   // 執(zhí)行 sum 函數(shù)的 apply、bind 方法沼瘫，打印的 this 同下
   obj.sum.call()  // 打印 window
   obj.sum.call(undefined, 1, 2)  // 打印 window
   obj.sum.call(null, 1, 2)  // 打印 window
   

   /* 嚴(yán)格模式 */
   'use strict'
   
   // 執(zhí)行 sum 函數(shù)的 apply抬纸、bind 方法，打印的 this 同下
   obj.sum.call()  // 打印 undefined
   obj.sum.call(undefined, 1, 2)  // 打印 undefined
   obj.sum.call(null, 1, 2)  // 打印 null
   

模擬實(shí)現(xiàn)

1. 關(guān)鍵點(diǎn)

   • myCall() 方法被添加在 Function 原型對(duì)象上耿戚，目標(biāo)函數(shù)調(diào)用該方法時(shí)湿故，myCall() 方法內(nèi)部的 this 將指向目標(biāo)函數(shù)。
   • 將目標(biāo)函數(shù)作為 context 對(duì)象的方法來(lái)執(zhí)行膜蛔，由此目標(biāo)函數(shù)內(nèi)部的 this 將指向 context 對(duì)象晓锻。
   • 從 context 對(duì)象中刪除目標(biāo)函數(shù)
   • 使用擴(kuò)展運(yùn)算符 ... 處理傳入目標(biāo)函數(shù)的參數(shù)

2. call()、apply()飞几、bind() 方法的模擬實(shí)現(xiàn)中砚哆，對(duì)于不傳第一個(gè)參數(shù)或者傳遞 undefined、null 時(shí)屑墨，這里在 JS 正常模式和嚴(yán)格模式下做了統(tǒng)一處理躁锁，即目標(biāo)函數(shù)內(nèi)部的 this 均指向 window 對(duì)象。

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() 方法

調(diào)用 apply() 方法會(huì)立即執(zhí)行目標(biāo)函數(shù)卵史，同時(shí)改變函數(shù)內(nèi)部 this 的指向战转。this 指向由方法的第一個(gè)參數(shù)決定，第二個(gè)參數(shù)是一個(gè)參數(shù)數(shù)組或 arguments 對(duì)象以躯，各數(shù)組元素或 arguments 對(duì)象表示的各參數(shù)將作為目標(biāo)函數(shù)的參數(shù)一一對(duì)應(yīng)傳入槐秧。

模擬實(shí)現(xiàn)

1. 關(guān)鍵點(diǎn)

   • myApply() 方法被添加在 Function 原型對(duì)象上，目標(biāo)函數(shù)調(diào)用該方法時(shí)忧设，myApply() 方法內(nèi)部的 this 將指向目標(biāo)函數(shù)刁标。
   • 將目標(biāo)函數(shù)作為 context 對(duì)象的方法來(lái)執(zhí)行，由此目標(biāo)函數(shù)內(nèi)部的 this 將指向 context 對(duì)象址晕。
   • 從 context 對(duì)象中刪除目標(biāo)函數(shù)
   • 使用擴(kuò)展運(yùn)算符 ... 處理傳入目標(biāo)函數(shù)的參數(shù)

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. 調(diào)用 bind() 方法將返回一個(gè)新函數(shù)——目標(biāo)函數(shù)的拷貝膀懈，該函數(shù)內(nèi)部的 this 指向方法的第一個(gè)參數(shù)，后面逐個(gè)列舉的任意個(gè)參數(shù)將作為目標(biāo)函數(shù)的參數(shù)一一對(duì)應(yīng)傳入谨垃。之后執(zhí)行新函數(shù)相當(dāng)于執(zhí)行了目標(biāo)函數(shù)启搂。
2. bind() 方法實(shí)現(xiàn)了函數(shù)柯里化，因此可以分兩次向目標(biāo)函數(shù)傳遞參數(shù)刘陶，第一次的參數(shù)列舉在 bind() 方法首參后面胳赌，第二次的參數(shù)列舉在新函數(shù)中。

模擬實(shí)現(xiàn)

1. 關(guān)鍵點(diǎn)

   • myBind() 方法被添加在 Function 原型對(duì)象上匙隔，目標(biāo)函數(shù)調(diào)用該方法時(shí)疑苫，myBind() 方法內(nèi)部的 this 將指向目標(biāo)函數(shù)。
   • 將目標(biāo)函數(shù)作為 context 對(duì)象的方法來(lái)執(zhí)行，由此目標(biāo)函數(shù)內(nèi)部的 this 將指向 context 對(duì)象缀匕。
   • 從 context 對(duì)象中刪除目標(biāo)函數(shù)
   • 使用擴(kuò)展運(yùn)算符 ... 處理傳入目標(biāo)函數(shù)的初始參數(shù)笼痛、后續(xù)參數(shù)贺嫂。

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
   

??相關(guān)知識(shí)點(diǎn)

• 關(guān)于 JavaScript 中 this 的指向