call()&apply()
此文摘自螞蟻部落大佬文章javascript
call方法能夠改變其餘方法（函數）的調用對象，方法內的this也會指向新的調用對象。html
此方法與apply方法功能相似，具體參閱JavaScript apply()一章節。java
特別說明：apply對箭頭函數無效。web
語法結構：數組
|
1
|
fn.call(thisobj,arg1,arg2,...)
|
參數解析：瀏覽器
（1）.fn：要被改變調用對象的方法或者函數。app
（2）.thisobj：必需，fn的新調用對象，fn中的this將會指向此對象。函數
（3）.arg：可選，傳遞給fn的參數。this
瀏覽器支持：url
（1）.IE瀏覽器支持此方法。
（2）.edge瀏覽器支持此方法。
（3）.谷歌瀏覽器支持此方法。
（4）.opera瀏覽器支持此方法。
（5）.火狐瀏覽器支持此方法。
（6）.safria瀏覽器支持此方法。
代碼實例:
|
1
2
3
4
5
6
7
8
9
|
var
obj={
webName:
"螞蟻部落"
}
var
webName=
"baidu"
;
function
fn(){
console.log(
this
.webName);
}
fn();
fn.call(obj)
|
代碼運行效果截圖以下：
代碼分析以下：
（1）.默認狀態下，調用fn函數，函數中的this指向window對象，因此打印結果爲"baidu"。
（2）.經過call方法將fn的調用對象修改obj，那麼fn中的this也就指向obj，因而打印結果爲"螞蟻部落"。
|
1
2
3
4
5
6
7
8
|
var
obj = {
webName:
"螞蟻部落"
}
function
fn(x,y){
console.log(
this
.webName);
console.log(x + y)
}
fn.call(obj, 2, 3);
|
代碼運行效果截圖以下：
代碼分析以下：
（1）.經過call方法將fn函數的調用對象修改obj，那麼fn中this指向obj。
（2）.call方法從第二個參數開始的全部參數都是爲fn傳遞的參數，也就是將參數2和3傳遞給fn。
apply能夠修改指定函數的調用對象，函數中的this也會指向新的調用對象。
恰當的使用apply可讓繁瑣的操做變得更爲簡單。
特別說明：apply對箭頭函數無效。
語法結構：
|
1
|
function
.apply(newObj[, argsArray])
|
參數解析：
（1）.function：此函數的調用對象將被修改。
（2）.newObj：必需，函數的新調用對象。
（3）.argsArray：必需，傳遞給function函數的參數，數組或者arguments對象。
一.代碼實例：
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
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，那麼打印結果也就變成"百度"。
再來看一段代碼實例：
|
01
02
03
04
05
06
07
08
09
10
11
12
|
function
A(){
}
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方法實現。
代碼實例以下：
|
1
2
3
|
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方法以數組形式傳遞參數，很是簡潔的實現了預期效果。
|
1
2
3
4
|
let
a = [1,2,3];
let
b = [3,4];
Array
.prototype.push.apply(a, b);
console.log(a);
|
代碼運行效果截圖以下：
利用apply能夠很方便的實現了數組的合併效果。
因爲ES2015的出現，還有比上面更加方便的合併數組的方式。
代碼實例以下：
|
1
2
|
let
arr=[4,5];
console.log([1,2,3,...arr]);
|
代碼運行效果截圖以下：
使用展開運算符使數組合並數組更加方便。
-
每一个你不满意的现在，都有一个你没有努力的曾经。