實現 call()、apply() 和 bind() 方法

摘要： 現在在看新東西的時候，經常會很自然地去思考其內部實現機制，我覺得這個是通向進階之路的一個很好的思維方式。 我們平時經常會使用到 call()、apply() 以及 bind() 方法，那麼你是否清楚這幾個方法的內部實現機制呢？在這篇博文中我希望能夠通過實現自己的 call()、apply(...

現在在看新東西的時候，經常會很自然地去思考其內部實現機制，我覺得這個是通向進階之路的一個很好的思維方式。

我們平時經常會使用到 call()、apply() 以及 bind() 方法，那麼你是否清楚這幾個方法的內部實現機制呢？在這篇博文中我希望能夠通過實現自己的 call()、apply() 和 bind() 方法以使我們能夠更好地理解其內部實現機制。

Function.prototype.call

使用過 call() 方法的童鞋應該都知道，call() 方法的作用就是執行呼叫函式並改變其內部的 this 指向。

在 MDN 中的定義是： call() 方法呼叫一個函式, 其具有一個指定的 this 值和分別地提供的引數（引數的列表） 。

讓我們看如下例子：

// 瀏覽器環境中執行
let count = 0;
let obj = {
count:1
}
function addNum(arg1,arg2){
return this.count + arg1 + arg2;
}

console.log(addNum(2,3)) // 5
console.log(addNum.call(obj,2,3)) // 6

addNum.call(obj) 執行 addNum() 方法並將其內部 this 指向改為 obj，所以最終返回的是 obj.count + arg1 + arg2 。

那麼如何將 addNum() 方法內部 this 指向改為 obj 呢？如果對 this 指向有一定了解的同學，很容易可以想到如下的方式：

obj.fn = addNum;
console.log(obj.fn(2,3)); // 6

事實上，call() 方法內部改變 this 指向的機制也是一樣的， 通過將呼叫函式作為傳入物件的一個屬性來呼叫，來實現 this 指向的改變。

所以接下來，我們便可以通過這個機制來實現 call() 方法，其需要有以下特性：

• 不傳引數或者第一個引數傳 null，this 指向 window；
• 第一個引數之後的引數作為呼叫函式的傳參接收；
• 改變函式 this 指向，返回呼叫函式執行結果；

所以，最終實現的 myCall() 方法如下：

Function.prototype.myCall = function (context) {
if (typeof this !== 'function') throw new TypeError('Error');

context = context || window
context.fn = this
const args = [...arguments].slice(1)
const result = context.fn(...args)
delete context.fn

return result
}

通過 myCall() 方法來實現上述例子依舊能得到正確的返回結果：

console.log(addNum.myCall(obj,2,3)) // 6

Function.prototype.apply

apply() 方法與 call() 方法類似，區別在於 apply() 方法在接收呼叫函式引數的時候是以陣列的形式接收的，所以在對引數的處理時會有所不同。

在 MDN 中的定義是： apply() 方法呼叫一個具有給定 this 值的函式，以及作為一個數組（或類似陣列物件）提供的引數。

同樣的，最終實現的 myApply() 方法如下：

Function.prototype.myApply = function (context) {
if (typeof this !== 'function') throw new TypeError('Error');

context = context || window
context.fn = this
let result
if (arguments[1]) {
result = context.fn(...arguments[1])
} else {
result = context.fn()
}
delete context.fn

return result
}

通過 myApply() 方法來實現上述例子依舊能得到正確的返回結果：

console.log(addNum.myApply(obj,[2,3])) // 6

Function.prototype.bind

bind() 方法相較之前的兩個函式則要複雜一些。

在 MDN 中的定義是： bind() 方法建立一個新的函式，在呼叫時設定 this 關鍵字為提供的值，並在呼叫新函式時，將給定引數列表作為原函式的引數序列的前若干項。

如下例子：

let bindFn1 = addNum.bind(obj);
console.log(bindFn1(2,3)); // 6
let bindFn2 = addNum.bind(obj, 2);
console.log(bindFn2(3)); // 6
let bindFn3 = addNum.bind(obj, 2, 3);
console.log(bindFn3()); // 6

所以我們實現的 bind() 方法需要有以下特性：

• 返回一個函式，該函式可以直接呼叫也可以通過 new 方式呼叫；
• 直接呼叫則改變函式 this 指向，通過 new 方式呼叫則忽略；
• 返回函式能接收 bind 函式傳遞的部分引數；

所以，最終實現的 myBind() 方法如下：

Function.prototype.myBind = function (context) {
if (typeof this !== 'function') throw new TypeError('Error');

const _this = this
const args = [...arguments].slice(1)

return function F() {
if (this instanceof F) {//通過 new 方式呼叫的情況
return new _this(...args, ...arguments)
}
return _this.apply(context, args.concat(...arguments))
}
}

通過 myBind() 方法來實現上述例子依舊能得到正確的返回結果：

let bindFn1 = addNum.myBind(obj);
console.log(bindFn1(2,3)); // 6
let bindFn2 = addNum.myBind(obj, 2);
console.log(bindFn2(3)); // 6
let bindFn3 = addNum.myBind(obj, 2, 3);
console.log(bindFn3()); // 6

公眾號不定時分享個人在前端方面的學習經驗，歡迎關注。