我在一開始看到javascript的函數apply和call時,非常的模糊,看也看不懂,最近在網上看到一些文章對apply方法和call的一些示例,總算是看的有點眉目了,在這里我做如下筆記,希望和大家分享.. 如有什么不對的或者說法不明確的地方希望讀者多多提一些意見,以便共同提高..
主要我是要解決一下幾個問題:
1.apply和call的區別在哪里 2.什么情況下用apply,什么情況下用call 3.apply的其他巧妙用法（一般在什么情況下可以使用apply）
我首先從網上查到關於apply和call的定義,然后用示例來解釋這兩個方法的意思和如何去用.
apply:方法能劫持另外一個對象的方法，繼承另外一個對象的屬性.
Function.apply(obj,args)方法能接收兩個參數
obj：這個對象將代替Function類里this對象
args：這個是數組，它將作為參數傳給Function（args-->arguments）
call:和apply的意思一樣,只不過是參數列表不一樣.
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：這個對象將代替Function類里this對象
params：這個是一個參數列表
1. apply示例:
<script type="text/javascript">
/*定義一個人類*/
function Person(name,age)
{
this.name=name;
this.age=age;
}
/*定義一個學生類*/
functionStudent(name,age,grade)
{
Person.apply(this,arguments);
this.grade=grade;
}
//創建一個學生類
var student=new Student("zhangsan",21,"一年級");
//測試
alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);
//大家可以看到測試結果name:zhangsan age:21 grade:一年級
//學生類里面我沒有給name和age屬性賦值啊,為什么又存在這兩個屬性的值呢,這個就是apply的神奇之處.
</script>
分析: Person.apply(this,arguments);
this:在創建對象在這個時候代表的是student
arguments:是一個數組,也就是[“zhangsan”,”21”,”一年級”];
也就是通俗一點講就是:用student去執行Person這個類里面的內容,在Person這個類里面存在this.name等之類的語句,這樣就將屬性創建到了student對象里面
2. call示例
在Studen函數里面可以將apply中修改成如下:
Person.call(this,name,age);
這樣就ok了
3. 什么情況下用apply,什么情況下用call
在給對象參數的情況下,如果參數的形式是數組的時候,比如apply示例里面傳遞了參數arguments,這個參數是數組類型,並且在調用Person的時候參數的列表是對應一致的(也就是Person和Student的參數列表前兩位是一致的) 就可以采用 apply , 如果我的Person的參數列表是這樣的(age,name),而Student的參數列表是(name,age,grade),這樣就可以用call來實現了,也就是直接指定參數列表對應值的位置(Person.call(this,age,name,grade));
4. apply的一些其他巧妙用法
細心的人可能已經察覺到,在我調用apply方法的時候,第一個參數是對象(this), 第二個參數是一個數組集合, 在調用Person的時候,他需要的不是一個數組,但是為什么他給我一個數組我仍然可以將數組解析為一個一個的參數,這個就是apply的一個巧妙的用處,可以將一個數組默認的轉換為一個參數列表([param1,param2,param3] 轉換為 param1,param2,param3) 這個如果讓我們用程序來實現將數組的每一個項,來裝換為參數的列表,可能都得費一會功夫,借助apply的這點特性,所以就有了以下高效率的方法:
a) Math.max 可以實現得到數組中最大的一項
因為Math.max 參數里面不支持Math.max([param1,param2]) 也就是數組
但是它支持Math.max(param1,param2,param3…),所以可以根據剛才apply的那個特點來解決 var max=Math.max.apply(null,array),這樣輕易的可以得到一個數組中最大的一項(apply會將一個數組裝換為一個參數接一個參數的傳遞給方法)
這塊在調用的時候第一個參數給了一個null,這個是因為沒有對象去調用這個方法,我只需要用這個方法幫我運算,得到返回的結果就行,.所以直接傳遞了一個null過去
b) Math.min 可以實現得到數組中最小的一項
同樣和 max是一個思想 var min=Math.min.apply(null,array);
c) Array.prototype.push 可以實現兩個數組合並
同樣push方法沒有提供push一個數組,但是它提供了push(param1,param,…paramN) 所以同樣也可以通過apply來裝換一下這個數組,即:
vararr1=new Array("1","2","3"); vararr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2);
也可以這樣理解,arr1調用了push方法,參數是通過apply將數組裝換為參數列表的集合.
通常在什么情況下,可以使用apply類似Math.min等之類的特殊用法:
一般在目標函數只需要n個參數列表,而不接收一個數組的形式（[param1[,param2[,…[,paramN]]]]）,可以通過apply的方式巧妙地解決這個問題!
ES6寫法：
擴展運算符（spread）是三個點（...）。它好比 rest 參數的逆運算，將一個數組轉為用逗號分隔的參數序列。
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]
該運算符主要用於函數調用。
function push(array, ...items) { array.push(...items); } function add(x, y) { return x + y; } const numbers = [4, 38]; add(...numbers) // 42
替代函數的 apply 方法
由於擴展運算符可以展開數組，所以不再需要apply方法，將數組轉為函數的參數了。
// ES5 的寫法 function f(x, y, z) { // ... } var args = [0, 1, 2]; f.apply(null, args); // ES6的寫法 function f(x, y, z) { // ... } let args = [0, 1, 2]; f(...args);
下面是擴展運算符取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數組最大元素的寫法。
// ES5 的寫法 Math.max.apply(null, [14, 3, 77]) // ES6 的寫法 Math.max(...[14, 3, 77]) // 等同於 Math.max(14, 3, 77);
上面代碼中，由於 JavaScript 不提供求數組最大元素的函數，所以只能套用Math.max函數，將數組轉為一個參數序列，然后求最大值。有了擴展運算符以后，就可以直接用Math.max了。
另一個例子是通過push函數，將一個數組添加到另一個數組的尾部。
// ES5的 寫法 var arr1 = [0, 1, 2]; var arr2 = [3, 4, 5]; Array.prototype.push.apply(arr1, arr2); // ES6 的寫法 let arr1 = [0, 1, 2]; let arr2 = [3, 4, 5]; arr1.push(...arr2);
上面代碼的 ES5 寫法中，push方法的參數不能是數組，所以只好通過apply方法變通使用push方法。有了擴展運算符，就可以直接將數組傳入push方法。
下面是另外一個例子。
// ES5 new (Date.bind.apply(Date, [null, 2015, 1, 1])) // ES6 new Date(...[2015, 1, 1]);
Reference：
[1] ____chen, Js apply方法詳解,及其apply()方法的妙用, https://www.cnblogs.com/chenhuichao/p/8493095.html
[2] http://es6.ruanyifeng.com/#docs/array