call，apply與bind方法的差別

對于記性不是很好的本來來說，這三個方法的差別總是記不住，于是就總結篇部落格，加深印象。

在說他們的不同之前，先了解了解他們的相似之處：

• 都是用來改變函數的this對象的指向的。
• 第一個參數都是this要指向的對象。
• 都可以利用後續參數傳參。

好了現在來總結不同之處：

1.call

通過call方法，将其執行環境添加到第一個參數的執行環境中，簡單來說，this就會指向第一個參數那個對象。

var a = {
    user:"哈哈哈哈哈",
    fn:function(){
        console.log("call方法：");
        console.log(this.user); //哈哈哈哈哈
    }
}
var b = a.fn;
b.call(a);
           

這時this就将b添加到a中了，這就相當于：

var a = {
    user:"哈哈哈哈哈",
    fn:function(){
        console.log("call方法：");
        console.log(this.user);
    }
}
a.fn(); //哈哈哈哈哈
           

當然，call也可以傳入多個參數，如：

var a = {
    user:"哈哈哈哈哈",
    fn:function(x，y){
        console.log("call方法：");
        console.log(this.user); //哈哈哈哈哈
        console.log(x+y);//3
    }
}
var b = a.fn;
b.call(a，,);
           

2.apply

apply與call也很類似，他也可以改變this的指向，也能傳入其他參數，但是是以數組的形式傳入的

var a = {
    user:"哈哈哈哈哈",
    fn:function(){
        console.log("apply方法：");
        console.log(this.user); //哈哈哈哈哈
    }
}
var b = a.fn;
b.apply(a);
           

第二個參數必須是數組：

var a = {
    user:"哈哈哈哈哈",
    fn:function(x，y){
        console.log("apply方法：");
        console.log(this.user); //哈哈哈哈哈
        console.log(x+y);//4
    }
}
var b = a.fn;
var array = [,];
b.apply(a，array);//或者：b.apply(a,[1,3]);
           

注意：如果call和apply的第一個參數寫的是null，那麼this指向的是window對象

var a = {
    user:"哈哈哈哈哈",
    fn:function(){
        console.log("apply方法：");
        console.log(this);
        //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
    }
}
var b = a.fn;
b.apply(null);
           

3.bind

bind與call和apply方法是不相同的，但是不管怎樣他們都是可以改變this指向。

bind傳入的第一個函數如果隻是個對象，那麼結果是不會被列印出來的。

var a = {
    user:"哈哈哈哈哈",
    fn:function(){
        console.log("bind方法：");
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);
           

如果這樣寫的話是不會出現任何結果的，，，，因為bind方法傳回的是一個修改過後的函數。

該這樣寫：

var a = {
    user:"哈哈哈哈哈",
    fn:function(){
        console.log("bind方法：");
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a)();//哈哈哈哈哈
//或者：var c=b.bind(a);   c();
console.log(c);// //function() { [native code] },這樣會輸出fn函數
           

同樣的bind也可以傳入多個參數，但是該參數是按順序傳入的

var a = {
    user:"哈哈哈哈哈",
    fn:function(e,d,f){
        console.log("bind方法：");
        console.log(this.user); //哈哈哈哈哈
        console.log(e,d,f); //5 1 2
    }
}
var b = a.fn;
var c = b.bind(a,);
c(,);
           

總結：

call和apply都是改變上下文中的this并立即執行這個函數，bind方法可以讓對應的函數想什麼時候調就什麼時候調用，并且可以将參數在執行的時候添加，這是它們的差別，根據自己的實際情況來選擇使用。