目录
apply作用
作用有两个,跟它的入参有关。
- 改变this指向。
- 将数组入参变为一般入参。
改变this指向
这是网上一个常见的例子:
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName: "Bill", lastName: "Gates", } person.fullName.apply(person1); // 将返回 "Bill Gates"
如何理解?可以这么理解,person有个方法fullName调用this.firstName和this.lastName这两个变量,this指向person这个对象,但它是没有这两个变量的。
apply可以改变调用apply方法的函数(这里指的就是person.fullName这个函数)的this指向,现在person.fullName.apply(person1)就让this指向person1了,fullName方法就可以访问到这两个值,就成功输出。
这样不好记怎么办?
可以这么记,当apply调用时,调用apply的函数是谁?(person.fullName),把这个函数分享给person1,让person1去调用。
如果是这样你就能理解了吧,这个就跟上文的代码一个意思,以后你碰到apply修改代码指向就这么理解代码就行。(可以这么理解,不要这么写哈,本质不一样)
var person = { fullName: function() { return this.firstName + " " + this.lastName; } } var person1 = { firstName: "Bill", lastName: "Gates", } person1.fullName = person.fullName person1.fullName(); // 将返回 "Bill Gates"
将数组入参变为一般入参
这里说一点,就是这个作用就是apply和call的最大区别了。
就是apply的第二个参数接受的是数组,call不是。
接收数组有什么用?
比如当一个函数入参是非数组,而你目前拥有的是数组,你不想处理数组再进行入参的输入,你就可以使用apply。
文字看的麻烦就直接看例子:
Math.max(1,2,3)//3 Math.max([1,2,3])//报错 Math.max.apply(null,[1,2,3])//3
需要注意的是这里的第一个值为null时,
在 “JavaScript 严格模式”下则它将成为被调用函数的所有者(对象)也就是没改变指向,在“非严格”模式下,它成为全局对象。
因为我们只是测试第二个入参作用,因此,第一个入参null就用来占位,就算改变了指向我们也没有用到它。
以下的例子可以加深一下你对apply和call区别的理解。
apply:
var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"John", lastName: "Doe" } person.fullName.apply(person1, ["Oslo", "Norway"]);
call:
var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"John", lastName: "Doe" } person.fullName.call(person1, "Oslo", "Norway");
把arguments改为真正的数组
可以用来把arguments改为数组
arguments作为函数自带的某个属性,可以用来访问函数的入参,它长得是数组的样子却没有数组的方法,例如concat()什么的都没有
因此我们可以用Array原型上的slice方法将arguments变成一个真正的数组。
(function fun(){ console.log(arguments.concat([3]))//报错 const arr = Array.prototype.slice.apply(arguments); console.log(arr.concat([3]))//[1,2,3] })(1,2)
修改过程也很好理解,arguments没有slice方法,我们可以通过apply,等于把Array的slice给arguments用了
等于调用了( 可以这么理解但是不要这么写哈):
(function fun(){ console.log(arguments.concat([3]))//报错 //const arr = Array.prototype.slice.apply(arguments); arguments.slice = Array.prototype.slice const arr = arguments.slice() console.log(arr.concat([3]))//[1,2,3] })(1,2)