1. 程式人生 > >淺談call apply bind的區別

淺談call apply bind的區別

lB src cti lba itl UNC 分享 spa div

這三個方法的用法非常相似,將函數綁定到上下文中,即用來改變函數中this的指向。舉個例子:

技術分享圖片
var zlw = {
    name: "zlw",
    sayHello: function (age) {
         console.log("hello, i am ", this.name + " " + age " years old");
     }
};

var  xlj = {
    name: "xlj",
};

zlw.sayHello(24);// hello, i am zlw 24 years old

技術分享圖片

下面看看call、apply方法的用法:

zlw.sayHello.call(xlj, 24);// hello, i am xlj 24 years old
zlw.sayHello.apply(xlj, [24]);// hello, i am xlj 24 years old

結果都相同。從寫法上我們就能看出二者之間的異同。相同之處在於,第一個參數都是要綁定的上下文,後面的參數是要傳遞給調用該方法的函數的。不同之處在於,call方法傳遞給調用函數的參數是逐個列出的,而apply則是要寫在數組中。

我們再來看看bind方法的用法:

zlw.sayHello.bind(xlj, 24)(); //hello, i am xlj 24 years old
zlw.sayHello.bind(xlj, [24])(); //hello, i am xlj 24 years old

bind方法傳遞給調用函數的參數可以逐個列出,也可以寫在數組中。bind方法與call、apply最大的不同就是前者返回一個綁定上下文的函數,而後兩者是直接執行了函數。

由於這個原因,上面的代碼也可以這樣寫:

zlw.sayHello.bind(xlj)(24); //hello, i am xlj 24 years old
zlw.sayHello.bind(xlj)([24]); //hello, i am xlj 24 years old

bind方法還可以這樣寫 fn.bind(obj, arg1)(arg2) 。

用一句話總結bind的用法:該方法創建一個新函數,稱為綁定函數,綁定函數會以創建它時傳入bind方法的第一個參數作為this,傳入bind方法的第二個以及以後的參數加上綁定函數運行時本身的參數按照順序作為原函數的參數來調用原函數。

淺談call apply bind的區別