js中的call,apply,bind區別

在JavaScript中，call、apply和bind是Function對象自帶的三個方法，這三個方法的主要做用是改變函數中的this指向。

call、apply、bind方法的共同點和區別：
apply 、 call 、bind 三者都是用來改變函數的this對象的指向的；
apply 、 call 、bind 三者第一個參數都是this要指向的對象，也就是想指定的上下文（函數的每次調用都會擁有一個特殊值——本次調用的上下文（context）——這就是this關鍵字的值。）；
apply 、 call 、bind 三者均可以利用後續參數傳參；
bind 是返回對應函數，便於稍後調用；apply 、call 則是當即調用 。

1、call

call()
語法：

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定義：調用一個對象的一個方法，以另外一個對象替換當前對象。

說明： call 方法能夠用來代替另外一個對象調用一個方法。
call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。

thisObj的取值有如下4種狀況：
（1） 不傳，或者傳null,undefined， 函數中的this指向window對象
（2） 傳遞另外一個函數的函數名，函數中的this指向這個函數的引用
（3） 傳遞字符串、數值或布爾類型等基礎類型，函數中的this指向其對應的包裝對象，如 String、Number、Boolean
（4） 傳遞一個對象，函數中的this指向這個對象

function a(){ console.log(this); //輸出函數a中的this對象 } function b(){} var c={name:"call"}; //定義對象c a.call(); //window a.call(null); //window a.call(undefined); //window a.call(1); //Number a.call(''); //String a.call(true); //Boolean a.call(b); //function b(){} a.call(c); //Object

若是你不理解上面的，不要緊，咱們再來看一個例子：

function class1(){ this.name=function(){ console.log("我是class1內的方法"); } } function class2(){ class1.call(this); //函數class1調用call方法，並傳入this(this爲class2構造後的的對象)，傳入的this對象替換class1的this對象，並執行class1函數體實現了class1的上下文（確切地說算僞繼承，原型鏈纔算得上真繼承）。 } var f=new class2(); f.name(); //調用的是class1內的方法，將class1的name方法交給class2使用

經常使用例子：
（1）

function eat(x,y){ console.log(x+y); } function drink(x,y){ console.log(x-y); } eat.call(drink,3,2); 輸出：5

這個例子中的意思就是eat只算是臨時調用了(或說實現了)一下drink函數。
你能夠console.log(window,eat.toString()); 你能夠看到eat的函數體仍是原來的。window上下文仍是保持着eat，drink原來的函數體，eat.call(drink,3,2) == eat(3,2) ，因此運行結果爲：console.log(5);
注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

（2）

function Animal(){ this.name="animal"; this.showName=function(){ console.log(this.name); } } function Dog(){ this.name="dog"; } var animal=new Animal(); var dog=new Dog(); animal.showName.call(dog); 輸出：dog

在上面的代碼中，咱們能夠看到Dog裏並無showName方法，那爲何（this.name）的值是dog呢？

關鍵就在於最後一段代碼（animal.showName.call(dog)），意思是把animal的方法放到dog上執行，也能夠說，把animal 的showName()方法放到 dog上來執行，因此this.name 應該是 dog。

（3）繼承

function Animal(name){ this.name=name; this.showName=function(){ console.log(this.name); } } function Dog(name){ Animal.call(this,name); } var dog=new Dog("Crazy dog"); dog.showName(); 輸出：Crazy dog

Animal.call(this) 的意思就是使用 Animal對象代替this對象，那麼Dog就能直接調用Animal的全部屬性和方法。

2、apply()

語法：apply([thisObj[,argArray]])

定義：應用某一對象的一個方法，用另外一個對象替換當前對象。

說明：
若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。
若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數。

call 和 apply的區別
對於 apply、call 兩者而言，做用徹底同樣，只是接受參數的方式不太同樣。

function class1(args1,args2){ this.name=function(){ console.log(args,args); } } function class2(){ var args1="1"; var args2="2"; class1.call(this,args1,args2); /*或*/ class1.apply(this,[args1,args2]); } var c=new class2(); c.name(); 輸出：1 2

call 須要把參數按順序傳遞進去，而 apply 則是把參數放在數組裏。

既然二者功能同樣，那該用哪一個呢？

在JavaScript 中，某個函數的參數數量是不固定的，所以要說適用條件的話，當你的參數是明確知道數量時用 call ；而不肯定的時候用 apply，而後把參數 push 進數組傳遞進去。當參數數量不肯定時，函數內部也能夠經過 arguments 這個數組來遍歷全部的參數。

3、bind
bind是在EcmaScript5中擴展的方法（IE6,7,8不支持）
bind() 方法與 apply 和 call 很類似，也是能夠改變函數體內 this 的指向。

　　MDN的解釋是：bind()方法會建立一個新函數，稱爲綁定函數，當調用這個綁定函數時，綁定函數會以建立它時傳入 bind()方法的第一個參數做爲 this，傳入 bind() 方法的第二個以及之後的參數加上綁定函數運行時自己的參數按照順序做爲原函數的參數來調用原函數。

注意：bind方法的返回值是函數

var bar=function(){ console.log(this.x); } var foo={ x:3 } bar(); bar.bind(foo)(); /*或*/ var func=bar.bind(foo); func(); 輸出： undefined 3
-------------------------------------------------------------
下面就【借用一道面試題】，來更深刻的去理解下 apply 和 call 。

function log(msg)　{
  console.log(msg);
}
log(1);    //1
log(1,2);    //1

上面方法能夠解決最基本的需求，可是當傳入參數的個數是不肯定的時候，上面的方法就失效了，這個時候就能夠考慮使用 apply 或者 call，注意這裏傳入多少個參數是不肯定的，因此使用apply是最好的，方法以下：

function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

接下來的要求是給每個 log 消息添加一個"(app)"的前輟，好比：

log("hello world");    //(app)hello world

該怎麼作比較優雅呢?這個時候須要想到arguments參數是個僞數組，經過 Array.prototype.slice.call 轉化爲標準數組，再使用數組方法unshift，像這樣：

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');
 
  console.log.apply(console, args);
};

有個有趣的問題，若是連續 bind() 兩次，亦或者是連續 bind() 三次那麼輸出的值是什麼呢？像這樣：

var bar = function(){
    console.log(this.x);
}
var foo = {
    x:3
}
var sed = {
    x:4
}
var func = bar.bind(foo).bind(sed);
func(); //?
 
var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是，兩次都仍將輸出 3 ，而非期待中的 4 和 5 。緣由是，在Javascript中，屢次 bind() 是無效的。更深層次的緣由， bind() 的實現，至關於使用函數在內部包了一個 call / apply ，第二次 bind() 至關於再包住第一次 bind() ,故第二次之後的 bind 是沒法生效的。

 

在常見的單體模式中，一般咱們會使用 _this , that , self 等保存 this ，這樣咱們能夠在改變了上下文以後繼續引用到它。 像這樣：

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

因爲 Javascript 特有的機制，上下文環境在 eventBind:function(){ } 過渡到 $('.someClass').on('click',function(event) { }) 發生了改變，上述使用變量保存 this 這些方式都是有用的，也沒有什麼問題。固然使用 bind() 能夠更加優雅的解決這個問題：

var foo = {
    bar : 1,
    eventBind: function(){
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}

 

轉自：https://www.cnblogs.com/libin-1/p/6069031.html