JavaScript函數之call、apply以及bind方法案例詳解
總結
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() 方法
- 調用 call() 方法會立即執行目標函數,同時改變函數內部 this 的指向。this 指向由方法的第一個參數決定,後面逐個列舉的任意個參數將作為目標函數的參數一一對應傳入。
- 對於開頭總結中相同點的最後一點,示例如下:
/* 正常模式 */ 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() 方法
- 調用 bind() 方法將返回一個新函數——目標函數的拷貝,該函數內部的 this 指向方法的第一個參數,後面逐個列舉的任意個參數將作為目標函數的參數一一對應傳入。之後執行新函數相當於執行瞭目標函數。
- 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 的指向
到此這篇關於JavaScript函數之call、apply以及bind方法案例詳解的文章就介紹到這瞭,更多相關JavaScript函數之call、apply以及bind方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- JS 函數的 call、apply 及 bind 超詳細方法
- JavaScript中call,apply,bind的區別與實現
- JavaScript中的this例題實戰總結詳析
- 原生js如何實現call,apply以及bind
- 使用JS簡單實現apply、call和bind方法的實例代碼