call、apply和 bind的簡單使用方法

Harriet666 發(fā)布于2019-08-20 17:48 / 520人閱讀

摘要：也就是說，區(qū)別就是，當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調(diào)執(zhí)行的時候，使用方法而則會立即執(zhí)行函數(shù)。

- call、apply:
在 javascript 中，call 和 apply 都是為了改變某個函數(shù)運行時的上下文（context）而存在的，換句話說，就是為了改變函數(shù)體內(nèi)部 this 的指向。

JavaScript 的一大特點是，函數(shù)存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念。

call可以傳遞一個thisArgs參數(shù)和一個參數(shù)列表，thisArgs 指定了函數(shù)在運行期的調(diào)用者，也就是函數(shù)中的 this 對象，而參數(shù)列表會被傳入調(diào)用函數(shù)中。thisArgs 的取值有以下4種情況：
（1）不傳，或者傳null,undefined，函數(shù)中的 this 指向 window 對象
（2）傳遞另一個函數(shù)的函數(shù)名，函數(shù)中的 this 指向這個函數(shù)的引用
（3）傳遞字符串、數(shù)值或布爾類型等基礎(chǔ)類型，函數(shù)中的 this 指向其對應(yīng)的包裝對象，如 String、Number、Boolean
（4）傳遞一個對象，函數(shù)中的 this 指向這個對象

function a() {
    console.log(this); //輸出函數(shù)a中的this對象
}
function b() {} //定義函數(shù)b

var obj = {
    name: "hehe"
}; //定義對象obj

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(obj); //Object

這是call 的核心功能，它允許你在一個對象上調(diào)用該對象沒有定義的方法，并且這個方法可以訪問該對象中的屬性。

function animals() {}
animals.prototype = {
    type: "dog",
    say: function() {
         console.log("I am a " + this.type);
    }
}
var dog = new animals();
dog.say();    //I am a dog
var cat = {type:"cat"};
dog.say.call(cat); //I am a cat

因此，可以看出 call 和 apply 是為了動態(tài)改變 this 而出現(xiàn)的，當(dāng)一個 object 沒有某個方法（本栗子中cat沒有say方法），但是其他的有（本栗子中dog有say方法），我們可以借助call或apply用其它對象的方法來操作。

apply、call 的區(qū)別:

對于 apply、call 二者而言，作用完全一樣，只是接受參數(shù)的方式不太一樣。

對象.函數(shù)名.call(thisArgs, arg1, arg2);
對象.函數(shù)名.apply(thisArgs, [arg1, arg2])

其中 this 是你想指定的上下文，他可以是任何一個 JavaScript 對象(JavaScript 中一切皆對象)，call 需要把參數(shù)按順序傳遞進(jìn)去，而 apply 則是把參數(shù)放在數(shù)組里。

- bind:
bind是ES5 新增的一個方法，它的傳參和call類似，但又和 call/apply 有著顯著的不同，即調(diào)用 call 或 apply 都會自動執(zhí)行對應(yīng)的函數(shù)，而 bind 不會執(zhí)行對應(yīng)的函數(shù)，只是返回了對函數(shù)的引用。

MDN的解釋是：bind()方法會創(chuàng)建一個新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個綁定函數(shù)時，綁定函數(shù)會以創(chuàng)建它時傳入 bind()方法的第一個參數(shù)作為 this，傳入 bind() 方法的第二個以及以后的參數(shù)加上綁定函數(shù)運行時本身的參數(shù)按照順序作為原函數(shù)的參數(shù)來調(diào)用原函數(shù)。

var obj = {
    id : 1,
    eventBind: function(){
         var _this = this;
         $(".btn").on("click",function(event) {
              alert(this.id); //undefined
              alert(_this.id);  //1
        });
     }
}
obj.eventBind();//沒有這句話，click事件不執(zhí)行

由于 Javascript 特有的機(jī)制，上下文環(huán)境在 eventBind:function(){ } 過渡到 $(".btn").on("click",function(event) { }) 發(fā)生了改變，上述使用變量保存 this 這些方式都是有用的，也沒有什么問題。當(dāng)然使用 bind() 可以更加優(yōu)雅的解決這個問題：

var obj = {
    id : 1,
    eventBind: function(){
         $(".btn").on("click",function(event) {
                  alert(this.id); //1
        }.bind(this));
    }
}
obj.eventBind();//沒有這句話，click事件不執(zhí)行

- call、apply和bind的區(qū)別：

var obj = {
    x: 88,
};
var foo = {
    getX: function() {
        return this.x;
    }
}
console.log(foo.getX.bind(obj)()); //88
console.log(foo.getX.call(obj)); //88
console.log(foo.getX.apply(obj)); //88

三個輸出的都是88，但是注意使用 bind() 方法后面多了對括號。

也就是說，區(qū)別就是，當(dāng)你希望改變上下文環(huán)境之后并非立即執(zhí)行，而是回調(diào)執(zhí)行的時候，使用 bind() 方法；而 apply/call 則會立即執(zhí)行函數(shù)。