js中的call()与apply()的应用

最近对常见的一些知识点开始进行总结，因为仅仅只是看过后过段时间会出现遗忘的现象，故决定写出来加深记忆。

此处先对一些模糊的知识进行明确声明：

在javaScript中，所有函数都是对象的方法。
如果一个函数不是javaScript对象的方法，则其为全局对象的函数。

call()方法的功能与应用

功能

call()方法是预定义的javaScript方法，可以用来调用所有者对象作为参数的方法。
通过call()，可以使用属于另一个对象的方法。简单来说，就是将另一个对象的方法用于call()方法中的参数对象。

应用

（1）将另一个对象的方法用于call()方法中的参数对象。来看一个简单的例子：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName:"Bill",
    lastName: "Gates",
}
person.fullName.call(person1);  // 将返回 "Bill Gates"

其中对象person是fullName()方法的所有者，person1以及person2均是拥有两个属性的对象，按照call()方法的功能，则person.fullName.call(person1);将person对象的fullName()方法用于person1对象，即call()方法可以用来调用所有者对象作为参数的方法。当person1对象调用person对象的fullName()方法时，this则指代当前执行代码的环境对象person1，故输出结果为"Bill Gates"。

（2）call() 方法可以分别接受参数。例子如下：

var person = {
  fullName: function(city, country) {
    return document.write(this.firstName + " " + this.lastName + "," + city + "," + country);
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");//Bill Gates,Seattle,USA

从person对象在定义fullName(city, country)方法时可知其包含两个参数，因此使用call()方法将person对象的fullName(city, country)方法用于另一个对象时，也可以通过call()方法分别传递参数给fullName(city, country)方法,故person.fullName.call(person1, “Seattle”, “USA”)的执行结果为：Bill Gates,Seattle,USA。

apply()方法的功能与应用

功能

通过apply()方法可以编下能够用于另一个对象的方法。与call()方法的功能相同，仅在使用时有少许差异。

应用

（1）编写用于另一个对象的方法。例子如下：

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

原理同call()，故此处不做赘述。

（2）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"]);//Bill Gates,Seatle,USA

从例子可以看出apply()方法在将person对象的fullName(city, country)用于person1对象时，对fullName()中的参数利用数组的方式进行传递。

call()与apply()的比较

相同点：

（1）均是预定义的javaScript方法；
（2）均能够实现讲一个对象的方法用于另一个对象；
（3）均可以在使用的时候传递参数。

不同点：

（1）call()方法在传递参数的时候只接受分别传参（也即单个传参），apply()方法在传递参数时仅接受数组传参。
（2）在 JavaScript 严格模式下，如果 apply() 方法的第一个参数不是对象，则它将成为被调用函数的所有者（对
	 象）在“非严格”模式下，它成为全局对象（对这一点不是很明白）。

如果要使用数组而不是参数列表，则 apply() 方法非常方便。

apply()用法拓展（在数组上模拟 max 方法）

（1）使用 Math.max() 方法找到（数字列表中的）最大数字，用例如下：

Math.max(1,2,3);  // 会返回 3

（2）由于 JavaScript 数组没有 max() 方法，因此您可以利用apply()对数组应用 Math.max() 方法。用例如下：

Math.max.apply(null, [1,2,3]); // 也会返回 3

第一个参数（null）无关紧要，因为在本例中并未使用它。以下例子会给出相同的结果：

Math.max.apply(Math, [1,2,3]); // 也会返回 3

Math.max.apply(" ", [1,2,3]); // 也会返回 3

Math.max.apply(0, [1,2,3]); // 也会返回 3

本文参考w3c关于call()与apply()的讲解。