此文摘自蚂蚁部落大佬文章
call方法可以改变其他方法(函数)的调用对象,方法内的this也会指向新的调用对象。
此方法与apply方法功能类似,具体参阅JavaScript apply()一章节。
特别说明:apply对箭头函数无效。
语法结构:
|
1
|
fn.call(thisobj,arg1,arg2,...) |
参数解析:
(1).fn:要被改变调用对象的方法或者函数。
(2).thisobj:必需,fn的新调用对象,fn中的this将会指向此对象。
(3).arg:可选,传递给fn的参数。
浏览器支持:
(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) |
代码运行效果截图如下:
![aid[2480] a:3:{s:3:"pic";s:43:"portal/201811/12/110052mmqzstz2wwcf3hn3.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201811/12/110052mmqzstz2wwcf3hn3.png)
代码分析如下:
(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); |
代码运行效果截图如下:
![aid[2481] a:3:{s:3:"pic";s:43:"portal/201811/12/110122jllc5lqnlb4c3g53.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201811/12/110122jllc5lqnlb4c3g53.png)
代码分析如下:
(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); |
代码运行效果截图如下:
![aid[2162] a:3:{s:3:"pic";s:43:"portal/201810/15/231410rr2t2jodgojvqpon.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201810/15/231410rr2t2jodgojvqpon.png)
代码分析如下:
(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","青岛市南区"]); |
代码运行效果截图如下:
![aid[2163] a:3:{s:3:"pic";s:43:"portal/201810/15/231440u5rgi9gdl852ulcx.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201810/15/231440u5rgi9gdl852ulcx.png)
代码分析如下:
(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)); |
代码运行效果截图如下:
![aid[2164] a:3:{s:3:"pic";s:43:"portal/201810/15/231540llor7skl66kz4ysl.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201810/15/231540llor7skl66kz4ysl.png)
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); |
代码运行效果截图如下:
![aid[2165] a:3:{s:3:"pic";s:43:"portal/201810/15/231615y9yddde0tqtvd9ys.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201810/15/231615y9yddde0tqtvd9ys.png)
利用apply可以很方便的实现了数组的合并效果。
由于ES2015的出现,还有比上面更加方便的合并数组的方式。
代码实例如下:
|
1
2
|
let arr=[4,5];console.log([1,2,3,...arr]); |
代码运行效果截图如下:
![aid[2166] a:3:{s:3:"pic";s:43:"portal/201810/15/231644r1vupp1lfpzn9trm.png";s:5:"thumb";s:0:"";s:6:"remote";N;}](http://www.softwhy.com/data/attachment/portal/201810/15/231644r1vupp1lfpzn9trm.png)
使用展开运算符使数组合并数组更加方便。