call、apply和 bind的簡(jiǎn)單使用方法

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

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

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

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

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

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

var obj = {
    name: "hehe"
}; //定義對(duì)象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 的核心功能，它允許你在一個(gè)對(duì)象上調(diào)用該對(duì)象沒有定義的方法，并且這個(gè)方法可以訪問該對(duì)象中的屬性。

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 是為了動(dòng)態(tài)改變 this 而出現(xiàn)的，當(dāng)一個(gè) object 沒有某個(gè)方法（本栗子中cat沒有say方法），但是其他的有（本栗子中dog有say方法），我們可以借助call或apply用其它對(duì)象的方法來操作。

apply、call 的區(qū)別:

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

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

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

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

MDN的解釋是：bind()方法會(huì)創(chuàng)建一個(gè)新函數(shù)，稱為綁定函數(shù)，當(dāng)調(diào)用這個(gè)綁定函數(shù)時(shí)，綁定函數(shù)會(huì)以創(chuàng)建它時(shí)傳入 bind()方法的第一個(gè)參數(shù)作為 this，傳入 bind() 方法的第二個(gè)以及以后的參數(shù)加上綁定函數(shù)運(yùn)行時(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)雅的解決這個(gè)問題：

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

三個(gè)輸出的都是88，但是注意使用 bind() 方法后面多了對(duì)括號(hào)。

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