JS 函數(shù)的 call、apply 及 bind 方法

一、call() 方法

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

/* 正常模式 */

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

1、call()方法的模擬實現(xiàn)

關(guān)鍵點：

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

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

代碼如下：

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() 方法會立即執(zhí)行目標(biāo)函數(shù)，同時改變函數(shù)內(nèi)部 this 的指向。this 指向由方法的第一個參數(shù)決定，第二個參數(shù)是一個參數(shù)數(shù)組或 arguments 對象，各數(shù)組元素或 arguments 對象表示的各參數(shù)將作為目標(biāo)函數(shù)的參數(shù)一一對應(yīng)傳入。

1、apply()方法的模擬實現(xiàn)

關(guān)鍵點：

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

代碼如下：

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

• 調(diào)用 bind() 方法將返回一個新函數(shù)——目標(biāo)函數(shù)的拷貝，該函數(shù)內(nèi)部的 this 指向方法的第一個參數(shù)，后面逐個列舉的任意個參數(shù)將作為目標(biāo)函數(shù)的參數(shù)一一對應(yīng)傳入。之后執(zhí)行新函數(shù)相當(dāng)于執(zhí)行了目標(biāo)函數(shù)。
• bind() 方法實現(xiàn)了函數(shù)柯里化，因此可以分兩次向目標(biāo)函數(shù)傳遞參數(shù)，第一次的參數(shù)列舉在 bind() 方法首參后面，第二次的參數(shù)列舉在新函數(shù)中。

1、bind() 方法的模擬實現(xiàn)

關(guān)鍵點：

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

代碼如下：

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

四、總結(jié)

三個方法的相同點與不同點：

相同點：
都能夠改變目標(biāo)函數(shù)執(zhí)行時內(nèi)部 this 的指向
方法的第一個參數(shù)用于指定函數(shù)執(zhí)行時內(nèi)部的 this 值
支持向目標(biāo)函數(shù)傳遞任意個參數(shù)
若不向方法的第一個參數(shù)傳值或者傳遞 undefined、null，則在 JavaScript 正常模式下，目標(biāo)函數(shù)內(nèi)部的 this 指向 window 對象，嚴(yán)格模式下，分別指向 undefined、null。

區(qū)別：
apply() 方法可接收兩個參數(shù)，而 call() 和 bind() 方法則可接收多個參數(shù)。
apply() 方法向目標(biāo)函數(shù)傳遞參數(shù)時只需將參數(shù)數(shù)組或 arguments 對象作為方法的第二個參數(shù)即可，而 call() 和 bind() 方法則需要將傳參逐個列舉在方法的一個參數(shù)后面。
調(diào)用 call() 和 apply() 方法時會立即執(zhí)行目標(biāo)函數(shù)，而 bind() 方法則不會，它將返回一個新函數(shù)——目標(biāo)函數(shù)的拷貝，該函數(shù)內(nèi)部的 this 指向 bind() 方法的第一個參數(shù)，之后執(zhí)行新函數(shù)相當(dāng)于執(zhí)行了目標(biāo)函數(shù)。
只有 bind() 方法實現(xiàn)了函數(shù)柯里化，因此可以分兩次向目標(biāo)函數(shù)傳遞參數(shù)。

以上就是JS 函數(shù)的 call、apply 及 bind 超詳細(xì)方法的詳細(xì)內(nèi)容，更多關(guān)于JS 函數(shù)的 call、apply 及 bind 方法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論