JS中apply和call的用法

追憶似水流年發表於2016-03-10
JSAPP

JavaScript中有一個call和apply方法，其作用基本相同，但也有略微的區別。

先來看看JS手冊中對call的解釋：

call 方法
呼叫一個物件的一個方法，以另一個物件替換當前物件。

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

引數
thisObj
可選項。將被用作當前物件的物件。

arg1, arg2,  , argN
可選項。將被傳遞方法引數序列。

說明
call 方法可以用來代替另一個物件呼叫一個方法。call 方法可將一個函式的物件上下文從初始的上下文改變為由 thisObj 指定的新物件。

如果沒有提供 thisObj 引數，那麼 Global 物件被用作 thisObj。

說明白一點其實就是更改物件的內部指標，即改變物件的this指向的內容。這在物件導向的js程式設計過程中有時是很有用的。

引用網上一個程式碼段，執行後自然就明白其道理。

<input type="text" id="myText"   value="input text">    
<script>    
    function Obj(){this.value="物件！";}    
    var value="global 變數";    
    function Fun1(){alert(this.value);}    
    
    window.Fun1();   //global 變數    
    Fun1.call(window);  //global 變數    
    Fun1.call(document.getElementById('myText'));  //input text    
    Fun1.call(new Obj());   //物件！    
</script>

　　call函式和apply方法的第一個引數都是要傳入給當前物件的物件，及函式內部的this。後面的引數都是傳遞給當前物件的引數。
執行如下程式碼：

<script>    
   var func=new function(){this.a="func"}    
    var myfunc=function(x){    
        var a="myfunc";    
        alert(this.a);    
        alert(x);    
    }    
    myfunc.call(func,"var");    
</script>

　　可見分別彈出了func和var。到這裡就對call的每個引數的意義有所瞭解了。

對於apply和call兩者在作用上是相同的，但兩者在引數上有區別的。
對於第一個引數意義都一樣，但對第二個引數：
apply傳入的是一個引數陣列，也就是將多個引數組合成為一個陣列傳入，而call則作為call的引數傳入（從第二個引數開始）。
如 func.call(func1,var1,var2,var3)對應的apply寫法為：func.apply(func1,[var1,var2,var3])

同時使用apply的好處是可以直接將當前函式的arguments物件作為apply的第二個引數傳入

相關文章