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

標籤：

要先明白存在call和apply的原因，才能記得牢一點：

在javascript OOP中，我們經常會這樣定義：

function cat(){}cat.prototype={　　food:"fish",　　say: function(){　　　　alert("I love "+this.food);　　}}var blackCat = new cat;blackCat.say();

但是如果我們有一個對象whiteDog = {food:"bone"},我們不想對它重新定義say方法，那麼我們可以通過call或apply用blackCat的say方法：blackCat.say.call(whiteDog);

所以，可以看出call和apply是為了動態改變this而出現的，當一個object沒有某個方法，但是其他的有，我們可以藉助call或apply用其它對象的方法來操作。

用的比較多的，通過document.getElementsByTagName選擇的dom-節點是一種類似array的array。它不能應用Array下的push,pop等方法。我們可以通過：
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
這樣domNodes就可以應用Array下的所有方法了。
對arguments對象使用Array.prototype.slice()方法，可以將其轉化為數組。採用同樣的辦法，也可以將NodeList對象轉化為數組。看下面的例子：//在IE8及之前無效var arryOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);在IE8及之前版本，將NodeList實現為一個COM對象，要想在IE中將NodeList轉換為數組，必須手動枚舉所有成員。

function convertToArray(nodes) {    var array = null;    try {        array = Array.prototype.slice.call(nodes, 0);    } catch (ex) {        array = [];        for(var i=0, l=nodes.length; i < l; i++){            array.push(nodes[i]);        }    }} 

 

call 和 apply 都是為了改變某個函數運行時的 context 即上下文而存在的，換句話說，就是為了改變函數體內部 this 的指向。因為 JavaScript 的函數存在「定義時上下文」和「運行時上下文」以及「上下文是可以改變的」這樣的概念。

二者的作用完全一樣，只是接受參數的方式不太一樣。例如，有一個函數 func1 定義如下：

var func1 = function(arg1, arg2) {};

就可以通過 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 來調用。其中 this 是你想指定的上下文，他可以任何一個 JavaScript 對象(JavaScript 中一切皆對象)，call 需要把參數按順序傳遞進去，而 apply 則是把參數放在數組裡。

JavaScript 中，某個函數的參數數量是不固定的，因此要說適用條件的話，當你的參數是明確知道數量時，用 call，而不確定的時候，用 apply，然後把參數 push 進數組傳遞進去。當參數數量不確定時，函數內部也可以通過 arguments 這個數組來便利所有的參數。

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