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]);
|
代码运行效果截图以下：
使用展开运算符使数组合并数组更加方便。
-
每一个你不满意的现在，都有一个你没有努力的曾经。