一些簡單的Javascript操作中較少會用到call和apply函數(shù)，在另外一些較大型的操作中，如web應(yīng)用開發(fā)，js框架開發(fā)中可能會經(jīng)常遇到這兩個函數(shù)。關(guān)于這兩個函數(shù)的解釋，網(wǎng)上的資料也很多，但是本人認為很多資料要么照本宣科，要么高度雷同，缺少接地氣的解釋。接下來我試圖用更加清晰簡單的思路來分析解釋這兩個函數(shù)。

先來分析一下call，這里有ECMAScript 3rd Edition對call函數(shù)的解釋[2]：當(dāng)call方法被一個function對象調(diào)用時(func.call(0))，需要傳入一個必須的參數(shù)和若干個非必須的參數(shù)，它的執(zhí)行過程是這樣的：
a, 如果調(diào)用call的對象是不可運行的，拋出一個TypeError錯誤。
b, 設(shè)置參數(shù)列表為空
c, 如果被調(diào)用的方法傳入不止一個參數(shù)，那么依次把arg1，arg2…插入到參數(shù)列表里
d, 返回調(diào)用call的函數(shù)結(jié)果，把調(diào)用函數(shù)(func)中的this用傳入的參數(shù)1替換，把傳入的參數(shù)列表當(dāng)作這個函數(shù)的參數(shù)。
實際上，call函數(shù)是function對象的原型，也就是說，當(dāng)調(diào)用call的函數(shù)必須也是個函數(shù)，當(dāng)調(diào)用這個call時，把調(diào)用call的函數(shù)中的this用傳入的對象替換就行了。下面有個例子：

<script>
 function C1(){
 this.name='張三';
 this.age='24';
 this.sayname=function(){
  console.log("這里是C1類，我的名字是:"+this.name+"我的年齡是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

執(zhí)行結(jié)果：
這里是C1類，我的名字是:張三我的年齡是24
這里是C1類，我的名字是:李四我的年齡是25
上面的代碼中，聲明了兩個類，C1和C2，C1有兩個屬性，一個方法，C2也有兩個和C1一樣的屬性，實例化之后，c1.sayname()打印出了實際屬性，c1.sayname.call(c2)卻打印除了c2的屬性，為什么為這樣？因為sayname()是個函數(shù)，并且函數(shù)體內(nèi)有this，當(dāng)call執(zhí)行的之后，this就會被c2代替，所以，最終會打印出c2的屬性。
apply和call的區(qū)別就在于可選參數(shù)的傳遞，apply的可選參數(shù)全部存放在一個數(shù)組當(dāng)中，當(dāng)成一個參數(shù)竄入而call是分成多個參數(shù)傳入。
那么，apply和call函數(shù)有哪些應(yīng)用呢？第一個是網(wǎng)絡(luò)上比較經(jīng)典的求數(shù)字?jǐn)?shù)組中的最大元素，直接用Math.max.apply(null,array)即可，另外一個是可以用apply和call實現(xiàn)繼承，如下:

<script> 
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜歡玩耍');
 }
 this.intruduce=function(){
  console.log('大家好，我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

執(zhí)行結(jié)果：
我在走路
我很喜歡玩耍
大家好，我是小明
與call()和apply()相似的函數(shù)是bind(), 它是在ECMAScript 5中新增的方法，但在ECMAScript 3中可以輕易的模擬bind()。bind函數(shù)一樣也是Javascript中Function.prototype的方法，這個方法的主要內(nèi)容是將函數(shù)綁定至某個對象。當(dāng)函數(shù)f()上綁定bind()方法并傳入一個對象o作為參數(shù)，這個方法將返回一個新的函數(shù)當(dāng)作o的方法來調(diào)用。傳入新函數(shù)的任何實參都將傳入原始函數(shù)。如下：

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"歲, 來自"+country+", 喜歡"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中國","打球"));
</script>

執(zhí)行結(jié)果：
大家好，我叫小明, 今年20歲, 來自中國, 喜歡打球
上面的例子等效于:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"歲, 來自"+country+", 喜歡"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中國","打球"]));
    //或者下面這個
 console.log(introduce.call(xiaoming,"中國","打球"));
</script>

需要注意的是：在ECMAScript 5的嚴(yán)格模式中，call()和apply()的第一個實參都會變成this的值，哪怕傳入的實參是原始值甚至是null或者undefined。在ECMAScript 3和非嚴(yán)格模式中，傳入的null和undefined都會被全局對戲那個代替，而其他原始值會被相應(yīng)的包裝對象所替代。

參考資料

[1], Javascript權(quán)威指南第6版，189頁
[2], Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] )
[3], Function.prototype.apply (thisArg, argArray)

最新評論