文章导航

JavaScript apply()

2018-10-15 23:13| 作者: admin| 查看: 5273| 评论: 1|来自: 蚂蚁部落

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);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/231410rr2t2jodgojvqpon.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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","青岛市南区"]);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/231440u5rgi9gdl852ulcx.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(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));

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/231540llor7skl66kz4ysl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

Math.max和Math.min方法可以接收多个数字以比较它们之间的大小。

可以通过apply方法以数组形式传递参数,非常简洁的实现了预期效果。

[JavaScript] 纯文本查看 复制代码运行代码
let a = [1,2,3];
let b = [3,4];
Array.prototype.push.apply(a, b);
console.log(a);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/231615y9yddde0tqtvd9ys.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

代码实例如下:

[JavaScript] 纯文本查看 复制代码运行代码
let arr=[4,5];
console.log([1,2,3,...arr]);

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/231644r1vupp1lfpzn9trm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

关于展开运算符更多知识可以参阅JavaScript 展开运算符一章节


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 house714714 2019-5-5 15:40
你好 我是初学者 想请教下  上面例子中的B.apply(oa,["age","青岛市南区"]);     这里面的代码以下两行为什么存在 是啥作用?
this.age=age;
this.address=address;
谢谢

查看全部评论(1)

返回顶部