徹底弄懂bind，apply，call三者的區別 (轉)

為什么要改變this指向？

我們知道bind，call，apply的作用都是用來改變this指向的，那為什么要改變this指向呢？請看下面的例子:

var name="lucy";
let obj={
 name:"martin",
 say:function () {
 console.log(this.name);
 }
};
obj.say(); //martin，this指向obj物件
setTimeout(obj.say,0); //lucy，this指向window物件

可以觀察到，正常情況下 say 方法中的 this 是指向呼叫它的 obj 物件的，而定時器 setTimeout 中的 say 方法中的 this 是指向window物件的(在瀏覽器中)，這是因為 say 方法在定時器中是作為回呼函式來執行的，因此回到主堆疊執行時是在全域執行背景關系的環境中執行的，但我們需要的是 say 方法中 this 指向obj物件，因此我們需要修改 this 的指向，

apply方法

apply接受兩個引數，第一個引數是this的指向，第二個引數是函式接受的引數，以陣列的形式傳入，且當第一個引數為null、undefined的時候，默認指向window(在瀏覽器中)，使用apply方法改變this指向后原函式會立即執行，且此方法只是臨時改變thi指向一次，

日常用法：改變this指向

示例：

回呼函式系結this指向：

var name="martin";
var obj={
 name:"lucy",
 say:function(year,place){
 console.log(this.name+" is "+year+" born from "+place);
 }
};
var say=obj.say;
setTimeout(function(){
 say.apply(obj,["1996","China"])
} ,0); //lucy is 1996 born from China,this改變指向了obj
say("1996"，"China") //martin is 1996 born from China,this指向window，說明apply只是臨時改變一次this指向

小技巧：改變引數傳入方式

示例：

求陣列中的最大值：

var arr=[1,10,5,8,3];
console.log(Math.max.apply(null, arr)); //10

其中Math.max函式的引數是以引數串列，如：Math.max(1,10,5,8,3)的形式傳入的，因此我們沒法直接把陣列當做引數，但是apply方法可以將陣列引數轉換成串列引數傳入，從而直接求陣列的最大值，

call方法

call方法的第一個引數也是this的指向，后面傳入的是一個引數串列（注意和apply傳參的區別），當一個引數為null或undefined的時候，表示指向window（在瀏覽器中），和apply一樣，call也只是臨時改變一次this指向，并立即執行，

示例：

var arr=[1,10,5,8,3];
console.log(Math.max.call(null,arr[0],arr[1],arr[2],arr[3],arr[4])); //10

采納以引數串列的形式傳入，而apply以引數陣列的形式傳入，

bind方法

bind方法和call很相似，第一引數也是this的指向，后面傳入的也是一個引數串列(但是這個引數串列可以分多次傳入，call則必須一次性傳入所有引數)，但是它改變this指向后不會立即執行，而是回傳一個永久改變this指向的函式，

示例：

var arr=[1,10,5,8,12];
var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3])
console.log(max(arr[4])); //12，分兩次傳參

可以看出，bind方法可以分多次傳參，最后函式運行時會把所有引數連接起來一起放入函式運行，

實作bind方法(面試題)：

簡易版

Function.prototype.bind=function () {
 var _this=this;
 var context=arguments[0];
 var arg=[].slice.call(arguments,1);
 return function(){
 arg=[].concat.apply(arg,arguments);
 _this.apply(context,arg);
 }
 };

完美版

//實作bind方法
 Function.prototype.bind = function(oThis) {
 if (typeof this !== 'function') {
 // closest thing possible to the ECMAScript 5
 // internal IsCallable function
 throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
 }
 var aArgs = Array.prototype.slice.call(arguments, 1),
 fToBind = this,
 fNOP = function() {},
 fBound = function() {
 // this instanceof fBound === true時,說明回傳的fBound被當做new的建構式呼叫
 return fToBind.apply(this instanceof fBound
 ? this
 : oThis,
 // 獲取呼叫時(fBound)的傳參.bind 回傳的函式入參往往是這么傳遞的
 aArgs.concat(Array.prototype.slice.call(arguments)));
 };
 // 維護原型關系
 if (this.prototype) {
 // 當執行Function.prototype.bind()時, this為Function.prototype 
 // this.prototype(即Function.prototype.prototype)為undefined
 fNOP.prototype = this.prototype; 
 }
 // 下行的代碼使fBound.prototype是fNOP的實體,因此
 // 回傳的fBound若作為new的建構式,new生成的新物件作為this傳入fBound,新物件的__proto__就是fNOP的實體
 fBound.prototype = new fNOP();
 return fBound;
 };
 var arr=[1,11,5,8,12];
 var max=Math.max.bind(null,arr[0],arr[1],arr[2],arr[3]);
 console.log(max(arr[4])); //12

apply，call，bind三者的區別

• 三者都可以改變函式的this物件指向，
• 三者第一個引數都是this要指向的物件，如果如果沒有這個引數或引數為undefined或null，則默認指向全域window，
• 三者都可以傳參，但是apply是陣列，而call是引數串列，且apply和call是一次性傳入引數，而bind可以分為多次傳入，
• bind 是回傳系結this之后的函式，便于稍后呼叫；apply 、call 則是立即執行

ref: https://zhuanlan.zhihu.com/p/82340026

標籤：其他

上一篇：jQuery-篩選器方法、操作標簽、事件

下一篇：【Vue面試題】談談你對Vue的diff演算法的理解