Javascript中的apply與call詳解
JavaScript中有一個call和apply方法，其作用基本相同，但也有略微的區別。
一、方法定義
1、call 方法
語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
參數 thisObj 可選項。將被用作當前對象的對象。 arg1, arg2, , argN 可選項。將被傳遞方法參數序列。
說明
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。
如果沒有提供 thisObj 參數，那么 Global 對象被用作thisObj。說明白一點其實就是更改對象的內部指針，即改變對象的this指向的內容。這在面向對象的js編程過程中有時是很有用的。
2、apply方法
語法：apply([thisObj[,argArray]])
定義：應用某一對象的一個方法，用另一個對象替換當前對象。
說明：
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。
如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 並且無法被傳遞任何參數。
二、常用實例
實例1：call應用實例
引用網上一個代碼段，運行后自然就明白其道理。
<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()); //對象！ window.Fun1(); //global 變量 </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。先調用func函數，用this.a=”func”替換myfunc中的this.a ; 然后將”var”傳遞給方法myfunc的參數x可見分別彈出了func和var。
對於apply和call兩者在作用上是相同的，但兩者在參數上有區別的。
第一個參數意義都一樣。第二個參數：apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。
如 func.call(func1,var1,var2,var3) 對應的apply寫法為：func.apply(func1,[var1,var2,var3])，同時使用apply的好處是可以直接將當前函數的arguments對象作為apply的第二個參數傳入。
實例2：繼承的演示
// 繼承的演示 function base() { this.member = " dnnsun_Member"; this.method = function() { window.alert(this.member); } } function extend() { base.call(this); window.alert(member); window.alert(this.method); }
上面的例子可以看出，通過call之后，extend可以繼承到base的方法和屬性。
順便提一下，在javascript框架prototype里就使用apply來創建一個定義類的模式，其實現代碼如下：
var Class = { create: function () { return function () { this.initialize.apply(this, arguments); } } }
解析：從代碼看,該對象僅包含一個方法：Create，其返回一個函數，即類。但這也同時是類的構造函數，其中調用initialize，而這個方法是在類創建時定義的初始化函數。通過如此途徑，就可以實現prototype中的類創建模式
示例：
var vehicle=Class.create(); vehicle.prototype={ initialize:function(type){ this.type=type; }, showSelf:function(){ alert("this vehicle is "+ this.type); } } var moto=new vehicle("Moto"); moto.showSelf();
運行結果為：this vehicle is Moto
實例3：
function add(a, b) { alert(a + b); } function sub(a, b) { alert(a - b); } add.call(sub, 3, 1);
輸出結果為：4
這個例子中的意思就是用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運行結果為：alert(4); 注意：js 中的函數其實是對象，函數名是對 Function 對象的引用。
實例4：
function Animal() { this.name = 'Animal'; this.showName = function () { alert(this.name); } } function Cat() { this.name = 'Cat'; } var animal = new Animal(); var cat = new Cat(); //通過call或apply方法，將原本屬於Animal對象的showName()方法交給對象cat來使用了。 //輸入結果為"Cat" animal.showName.call(cat, ','); //animal.showName.apply(cat,[]);
輸出結果為：cat
call 的意思是把 animal 的方法放到cat上執行，原來cat是沒有showName() 方法，現在是把animal 的showName()方法放到 cat上來執行，所以this.name 應該是 Cat。
實例5：實現繼承
function Animal(name) { this.name = name; this.showName = function () { alert(this.name); } } function Cat(name) { Animal.call(this, name); } var cat = new Cat('Black Cat'); cat.showName();
輸出結果為：Black Cat
Animal.call(this) 的意思就是使用 Animal對象代替this對象，那么 Cat中不就有Animal的所有屬性和方法了嗎，Cat對象就能夠直接調用Animal的方法以及屬性了。
實例6：實現多重繼承
var s1 = function(name){ this.name = name; } var s2 = function(sex){ this.sex = sex; } var s3 = function(age){ this.age = age; } var Student = function(name,sex,age,score){ s1.call(this,name); s2.call(this,sex); s3.call(this,age); this.score = score; } Student.prototype.construction = Student; var s = new Student('jack','male','12','100'); console.log(s.name); //輸出:jack console.log(s.sex); //輸出:male console.log(s.age); //輸出:12 console.log(s.score);//輸出:100
這樣我們就可以根據各個不同的功能模塊分不同的程序員獨立開發，最后合並起來，實現了多重繼承。