js apply()用法详解

apply作用

作用有两个，跟它的入参有关。

1. 改变this指向。
2. 将数组入参变为一般入参。

改变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)

尾言

如果刚好学完apply用法，可以移步顺便学习call、bind的用法：js apply、call、bind一篇掌握。