如何理解和熟練運用js中的call及apply？

call和apply

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

兩者作用一致，都是把obj(即this)綁定到thisObj，這時候thisObj具備了obj的屬性和方法。或者說thisObj『繼承』了obj的屬性和方法。綁定后會立即執行函數。

唯一區別是apply接受的是數組參數，call接受的是連續參數。

function add(j, k){
    return j+k;
}

function sub(j, k){
    return j-k;
}

我們在控制台運行：

add(5,3); //8
add.call(sub, 5, 3); //8
add.apply(sub, [5, 3]); //8

sub(5, 3); //2
sub.call(add, 5, 3); //2
sub.apply(add, [5, 3]); //2

調用原生對象的方法

示例：

var a = {0:1, 1:"yjc", length: 2}; 

a.slice(); //TypeError: a.slice is not a function

Array.prototype.slice.call(a);//[1, "yjc"]

對象a類似array，但不具備array的slice等方法。使用call綁定，這時候就可以調用slice方法。

實現繼承

通過call和apply，我們可以實現對象繼承。示例：

var Parent = function(){
    this.name = "yjc";
    this.age = 22;
}

var child = {};

console.log(child);//Object {} ,空對象

Parent.call(child);

console.log(child); //Object {name: "yjc", age: 22}

以上實現了對象的繼承。

bind的使用

obj.bind(thisObj, arg1, arg2, ...);

把obj綁定到thisObj，這時候thisObj具備了obj的屬性和方法。與call和apply不同的是，bind綁定后不會立即執行。

同樣是add()和sub()：

add.bind(sub, 5, 3); //不再返回8
add.bind(sub, 5, 3)(); //8

如果bind的第一個參數是null或者undefined，等於將this綁定到全局對象。