call()&apply()

此文摘自蚂蚁部落大佬文章

call方法可以改变其他方法（函数）的调用对象，方法内的this也会指向新的调用对象。

此方法与apply方法功能类似，具体参阅JavaScript apply()一章节。

特别说明：apply对箭头函数无效。

语法结构：

[JavaScript] 纯文本查看 复制代码

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浏览器支持此方法。

代码实例:

[JavaScript] 纯文本查看 复制代码运行代码

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，于是打印结果为"蚂蚁部落"。

[JavaScript] 纯文本查看 复制代码运行代码

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对箭头函数无效。

语法结构：

[JavaScript] 纯文本查看 复制代码

1	function .apply(newObj[, argsArray])

参数解析：

（1）.function：此函数的调用对象将被修改。

（2）.newObj：必需，函数的新调用对象。

（3）.argsArray：必需，传递给function函数的参数，数组或者arguments对象。

一.代码实例：

[JavaScript] 纯文本查看 复制代码运行代码

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，那么打印结果也就变成"百度"。

再来看一段代码实例：

[JavaScript] 纯文本查看 复制代码运行代码

01 02 03 04 05 06 07 08 09 10 11 12

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] 纯文本查看 复制代码运行代码

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方法以数组形式传递参数，非常简洁的实现了预期效果。

[JavaScript] 纯文本查看 复制代码运行代码

1 2 3 4

let a = [1,2,3]; let b = [3,4]; Array .prototype.push.apply(a, b); console.log(a);

代码运行效果截图如下：

利用apply可以很方便的实现了数组的合并效果。

由于ES2015的出现，还有比上面更加方便的合并数组的方式。

代码实例如下：

[JavaScript] 纯文本查看 复制代码运行代码

1 2	let arr=[4,5]; console.log([1,2,3,...arr]);

代码运行效果截图如下：

使用展开运算符使数组合并数组更加方便。

转载于:https://www.cnblogs.com/lujunan/p/10191897.html