JavaScript apply()

apply可以修改指定函式的呼叫物件，函式中的this也會指向新的呼叫物件。

恰當的使用apply可以讓繁瑣的操作變得更為簡單。

特別說明：apply對箭頭函式無效。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
function.apply(newObj[, argsArray])

引數解析：

（1）.function：此函式的呼叫物件將被修改。

（2）.newObj：必需，函式的新呼叫物件。

（3）.argsArray：必需，傳遞給function函式的引數，陣列或者arguments物件。

一.程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let antzone={
    webName:"螞蟻部落",
    show:function(){
        console.log(this.webName);
    }
}
let baidu={
    webName:"百度",
    show:function(){
        console.log(this.webName);
    }
}
antzone.show();
antzone.show.apply(baidu);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.antzone呼叫show方法，無疑this是指向antzone，列印結果自然是"螞蟻部落"。

（2）.antzone.show.apply，apply可以將show呼叫物件由antzone修改為baidu。

（3）.被修改之後，show中的this指向新物件baidu，那麼列印結果也就變成"百度"。

再來看一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function A(){
  this.url="http://www.softwhy.com";
}
function B(age,address){
  this.age=age;
  this.address=address;
  console.log(this.age);
  console.log(this.address);
  console.log(this.url);
}
let oa=new A();
B.apply(oa,["age","青島市南區"]);

程式碼執行效果截圖如下：

程式碼分析如下：

（1）.建立建構函式A的一個物件例項oa。

（2）.通過apply方法將B函式的呼叫物件修改為oa。

（3）.修改之後，B函式中的this指向物件oa。

（4）.最後給apply傳遞第二個引數，具有兩個元素的陣列，那麼B接收陣列中的兩個元素作為引數。

二.實際應用：

獲取數字陣列中的最大值和最小值的方式有很多，比如自己寫程式碼挨個遍歷比較。

比較方便的方式是利用Math.max和Math.min方法實現。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr = [7,3,4,6,10];
console.log(Math.max.apply(Math,arr));
console.log(Math.min.apply(Math,arr));

程式碼執行效果截圖如下：

Math.max和Math.min方法可以接收多個數字以比較它們之間的大小。

可以通過apply方法以陣列形式傳遞引數，非常簡潔的實現了預期效果。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let a = [1,2,3];
let b = [3,4];
Array.prototype.push.apply(a, b);
console.log(a);

程式碼執行效果截圖如下：

利用apply可以很方便的實現了陣列的合併效果。

由於ES2015的出現，還有比上面更加方便的合併陣列的方式。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
let arr=[4,5];
console.log([1,2,3,...arr]);

程式碼執行效果截圖如下：

使用展開運算子使陣列合並陣列更加方便。

關於展開運算子更多知識可以參閱JavaScript 展開運算子一章節