JavaScript函數的call、apply以及bind方法的實例用法

這篇文章主要介紹“JavaScript函數的call、apply以及bind方法的實例用法”，在日常操作中，相信很多人在JavaScript函數的call、apply以及bind方法的實例用法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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函數的call、apply以及bind方法的實例用法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！