手撕JavaScript call apply bind 函式

一、call apply bind 函式的基本用法

??首先這三個函式都是函式物件可用的三個方法，目的是為了改變呼叫者內部的 this 指向問題，下面簡單介紹下他們的區別，詳細內容可以看 其他檔案 ，

??例如我們定義如下 Person 函式：

function Person(){
	console.log(this.name)
}
Person();			// undefined
Person.call();		// undefined
Person.apply();		// undefined
let fun = Person.bind();
fun();				// undefined

??我們就可以利用 Person 這個函式物件去呼叫 call、apply、bind 這三個方法，這是為什么呢？其實這幾個方法都在 Function 建構式的原型物件上，而我們定義的 Person 建構式就是 Function 建構式的實體物件，Person 的原型 ( _proto_ ) 就是指向 Function 的原型物件的，所以可以通過原型鏈找到這三個方法，

??這三個函式都可以用于改變呼叫者內部的 this 指向的，第一個引數就是用于設定內部 this 所指的物件，之后可以有多個引數都將作為呼叫者的引數，

function Person(arg1,arg2){
	console.log(this.name+arg1+arg2);
}
let o = {
	name:"Dog"
}
Person("Arg1","Arg2");					// undefinedArg1Arg2
Person.call(o,"Arg1","Arg2");			// DogArg1Arg2
Person.apply(o,["Arg1","Arg2"]);		// DogArg1Arg2
let fun = Person.bind(o,"Arg1","Arg2");
fun();									// DogArg1Arg2

??從上述代碼可以看出以下幾點注意事項：

??call 和 apply 函式的呼叫會直接運行呼叫者函式，不同之處是他們傳入引數的形式不一樣，call 是將引數一個一個的傳入，apply 是將引數放入陣列中傳入，

??bind 是暫時將呼叫者與要指定的 this 物件系結在一起，但不執行呼叫者函式，可以暫時的保存這個系結的函式，隨后再執行，傳參的形式與 call 一樣，

??底層原理：

??為什么 Person.call(o) 就能將 Person 函式里的 this 指向 o 物件呢？其實這行代碼相當于 o.Person()，即底層相當于在 o 物件中加入了一個 Person 方法，

function Person(){
	console.log(this.name);
}
let o = {
	name:"Dog"
}
Person.call(o);		// 相當于下面的代碼
o.Person = function(){
	console.log(this.name);
};
o.Person();
/* 在呼叫 call 程序中 o 物件其實如下，之后 o 又恢復到原來的樣子
o = {
	name:"Dog",
	Person:function(){
		console.log(this.name);
	}
}
*/

二、手寫 myCall 方法

ES6 實作 myCall 方法

• 確定函式位置

??因為我們要實作的 myCall 方法也是每個函式物件都能呼叫的方法，所以也要把這個方法寫在 Function 的原型物件上，

Function.prototype.myCall = function(){
}

• 確定函式引數

??在來考慮這個函式的引數，第一個引數是一個物件，用來修改呼叫者函式內部的 this 指向的物件，之后可以有多個引數，用于產給呼叫者函式作為引數的（這里可以用擴展運算子把第二個之后所有的引數都收集起來），擴展運算子參考：10.6、引數擴展與收集

Function.prototype.myCall = function(obj,...args){
}

• 確定函式內部的 this 指向

??這時，我們要明白一個事情就是在 myCall 內部的 this 指向什么？

??在除了箭頭函式中的所有函式中 this 永遠指向它的呼叫者，那么在我們后面要呼叫 myCall 的陳述句中例如： Person.myCall(o) 可以知道，呼叫 myCall 的呼叫者就是一個函式 Person ，所以 myCall 函式內部的 this 就是指向這個 Person 呼叫者函式，

• 為物件內部添加呼叫者函式

??接下來要做的就是將這個函式添加到傳入的物件內部，讓該物件擁有這個方法，可以呼叫，

Function.prototype.myCall = function(obj,...args){
    obj.fun = this;
}

??上述代碼將呼叫 myCall 函式的呼叫者函式保存到了傳入引數 obj 物件的內部 fun 屬性（新建的屬性）上，即現在的 obj 物件內部多了個 fun 方法，該方法名指向呼叫者函式，fun 這個屬性名可以隨便取，沒有關系，

• 呼叫外部的呼叫者函式

??obj 物件有了呼叫者函式后，因為 myCall 函式是要直接執行呼叫者函式的，所以在 myCall 內部直接執行該函式，這里需要將 myCall 第二個之后的引數作為呼叫者函式的引數傳入，我們再次利用擴展運算子將 myCall 收集到的引數 args 陣列展開，

Function.prototype.myCall = function(obj,...args){
    obj.fun = this;
    obj.fun(...args);
}

• 洗掉內部的呼叫者函式，恢復原有結構

??執行完 fun 函式后，我們需要把這個屬性給洗掉掉，不能改變了原 obj 物件的內部結構，

Function.prototype.myCall = function(obj,...args){
    obj.fun = this;
    obj.fun(...args);
    delete obj.fun;		// 洗掉添加的方法 fun 
}

??到這里，我們就基本實作了類似于 call 功能的 myCall 函式，不過還有一些細節地方需要處理，

• 完善第一個引數問題

??問題一：就是當我們的第一個引數傳入的是 null 時，我們自己寫的 myCall 方法不能正常作業，而 call 可以，這時我們需要對引數 obj 進行一個處理，

Function.prototype.myCall = function(obj,...args){
    obj = obj || window;	// 當 obj 沒傳或傳入 null 時，默認指向 window
    obj.fun = this;
    obj.fun(...args);
    delete obj.fun;		
}

• 完善回傳值問題

??問題二：還有一個問題就是呼叫者函式的回傳值問題，如下第一段代碼，這個時候我們上面所寫的 myCall 方法不能很好的回傳呼叫者函式的回傳值，原 call 可以，

function Person(arg1,arg2){
	console.log(this.name+arg1+arg2);
    return 123;
}
let o = {
	name:"Dog"
}
Function.prototype.myCall = function(obj,...args){
    obj = obj || window;
    obj.fun = this;
    obj.fun(...args);
    delete obj.fun;		
}
let res1 = Person.myCall(o,"Arg1","Arg2");		// DogArg1Arg2
console.log(res1);    // undefined
let res2 = Person.call(o,"Arg1","Arg2");		// DogArg1Arg2
console.log(res2);    // 123

• 完整版的 myCall 函式

??此時只需要將 myCall 內部呼叫外部呼叫者函式的結果保存并最侄訓傳即可，如下第二段代碼，

Function.prototype.myCall = function(obj,...args){
    obj = obj || window;
    obj.fun = this;
    let res = obj.fun(...args);		// 將呼叫者函式運行的結果保存
    delete obj.fun;
    return res;						// 將呼叫者函式運行的結果回傳
}

??上述代碼就是 ES6 中最終的手寫 myCall 方法，

ES5 實作 myCall 方法

??用 ES5 實作 myCall 的主要問題是不能用 ES6 中的擴展語法實作引數的傳遞，這時主要就是去解決引數的傳遞問題，這時 myCall 的引數我們可以用內置的 arguments 來接收，但是 myCall 的第一個是不需要作為內部呼叫者函式執行的引數的，

Function.prototype.myCall = function(obj){
    obj = obj || window;
    obj.fun = this;
    // 將傳入的第二個之后的引數要傳入呼叫者函式，下行代碼只是示例期望的樣子，不符合語法的，
    let res = obj.fun(arguments[1],arguments[2],...);		
    delete obj.fun;
    return res;						// 將呼叫者函式運行的結果回傳
}

??當不使用 ES6 的擴展語法時，我們可以采用 eval 函式（能夠決議 JavaScript 代碼），

??我們需要將執行呼叫者函式的陳述句寫成字串的形式作為 eval 函式的引數傳入如下示例，需要解決的問題是如何將 fun 的引數動態的生成如下的形式，

eval("obj.fun(arguments[1],arguments[2],...)");

??這里可以新建一個陣列，用來保存 myCall 傳入的第二個及之后的所有引數，如下代碼：

Function.prototype.myCall = function(obj){
    obj = obj || window;
    obj.fun = this;
    const arrs = [];
    for(let i = 1;i<arguments.length;i++){
    	arrs.push(arguments[i]);
    }
}

?? 接下來需要將陣列里的內容按, 分開插入eval 函式的相應位置即可，

• 完整版的 myCall 函式

Function.prototype.myCall = function(obj){
    obj = obj || window;
    obj.fun = this;
    const arrs = [];
    for(let i = 1;i<arguments.length;i++){
    	arrs.push("arguments["+ i +"]");		
    }
    // 此時 arrs 就是：[arguments[1],arguments[2],...]
    eval("obj.fun("+ arrs +")");
    delete obj.fun;
    return res;						// 將呼叫者函式運行的結果回傳
}

??這樣我們 ES6 之前的手寫 myCall 版本也就實作了，

??上述代碼中要理解一個知識點就是，當把陣列加一個空字串列印時，就是把陣列的所有元素以 , 逗號分割列印：

arr1 = [1,2,3,4];
console.log(arr1);		//  [1,2,3,4]
console.log(arr1+"");   // 1,2,3,4

三、手寫 myApply 方法

??有了前面 myCall 方法的分析程序和 call 與 apply 函式的細微區別，我們可以很容易改造出自己的 myApply 方法，

• ES6 之后版本

Function.prototype.myApply = function(obj,args){
    obj = obj || window;
    obj.fun = this;
    let res = null;
    if(!args){
    	res = obj.fun();
    }else{
    	res = obj.fun(...args);	
    }
    delete obj.fun;
    return res;						// 將呼叫者函式運行的結果回傳
}

• ES6 之前版本

Function.prototype.myCall = function(obj,args){
    obj = obj || window;
    obj.fun = this;
    const arrs = [];
    let res = null;
    if(!args){
    	res = obj.fun();
    }else{
    	for(let i = 0;i<args.length;i++){
    		arrs.push("args["+ i +"]");		
    	}
    	eval("obj.fun("+ arrs +")");
    }
    delete obj.fun;
    return res;						// 將呼叫者函式運行的結果回傳
}

四、手寫 myBind 方法

??bind 的不同之處是 bind 函式回傳的是一個函式，而不執行呼叫者函式，第二是 bind 函式具有柯里化特性的即：引數可以在系結 this 時傳入一部分，在呼叫時再傳入一部分，

function Person(a,b){
	console.log(this.name+a+b);
}
const o = {
	name:"Dog"
}
Person.bind(o,1)(2);    // Dog12

??上述代碼中第七行的 Person.bind(o,1) 是一個函式，如果沒有后面的括號2 (2) 就不會呼叫，有了括號才呼叫的，并且引數是在系結 this 時傳入了 a 為 1，呼叫時傳入來了 b 為 2，

??在寫自己的 myBind 方法時，內部的 this 系結同 myCall 和 myApply 一樣，主要解決回傳值和柯里化特性，myBind 要回傳一個函式，所以基本結構如下：

Function.prototype.myBind = function(){
	return function(){
	}
}

??上述代碼中要分析清楚兩個地方的 this 指向問題：

Function.prototype.myBind = function(){
    // 這里的 this 指向呼叫者函式
	return function(){
		// 這里的 this 指向 window
	}
}

??弄清楚上面的兩個位置的 this 指向后，最終 myBind 函式是要回傳呼叫者函式（可能修改內部的this）的，所以我們要在 return 的函式外部把外部的呼叫者函式保存起來（如下第 2 行），然后在 return 回傳的函式內部使用（這里就形成了閉包），當然這里也可以 return 一個箭頭函式，那么箭頭函式里面的 this 就是外部環境中的 this 了，即呼叫者函式，

??系結時的引數傳入保存在陣列 args1 中，如下第4行，呼叫時的引數保存在 args2 中，如下第 8 行，回傳的函式中可以直接呼叫 apply 函式，并將外部傳入的 obj 和所有的引數傳入即可，

Function.prototype.myBind = function(obj){
    let that = this;		// 1.保存外部的呼叫者函式
    // 2. args1 以陣列的形式保存系結時傳入的第二個之后的引數
    let args1 = Array.prototype.slice.call(arguments,1);	
    let args2 = null;	// 保存呼叫時傳入的引數
	return function(){
        // 3. args2 以陣列的形式保存呼叫時傳入的引數
        args2 = Array.prototype.slice.call(arguments);
        // 4. 將 args1 和 args2 引數拼接后作為 apply 方法引數
		that.apply(obj,args1.concat(args2));
	}
}