JS借用调用方法 – JavaScript高级教程

上一章JavaScript教程请查看：JS事件传播机制

在本教程中，你将学习如何在JavaScript中借用现有对象的功能。

从对象中借用方法

在JavaScript中，可以从其他对象借用方法来构建某些功能，而不必继承它们的所有属性和方法。

JavaScript为所有函数对象提供了两种方法，call()和apply()，它们允许调用一个函数，就像调用另一个对象的方法一样。这里有一个例子:

var objA = {
    name: "object A",
    say: function(greet) {
        alert(greet + ", " + this.name);
    }
}

objA.say("Hi"); // 显示: Hi, object A

var objB = {
    name: "object B"
}

/* objA没有say()方法，但是它可以从objA借用 */
objA.say.call(objB, "Hello"); // 显示: Hello, object B

call()和apply()方法的区别

apply()方法的语法与call()几乎相同，唯一的区别是，call()方法接受一个参数列表，比如call(thisObj, arg1, arg2，…)，而apply()方法只接受一个参数数组，比如apply(thisObj， [argsArray])。

注意方括号([])，它表示一个数组，在下面的例子的最后一行:

var objA = {
    name: "object A",
    say: function(greet) {
        alert(greet + ", " + this.name);
    }
}

objA.say("Hi"); // 显示: Hi, object A

var objB = {
    name: "object B"
}

/* objA没有say()方法，但是它可以从objA借用 */
objA.say.apply(objB, ["Hello"]); // 显示: Hello, object B

使用内置的方法

apply()方法还允许你使用内置的方法来快速、轻松地执行某些任务。其中一个例子是使用Math.max()/Math.min()来找出数组中的最大值或最小值，否则就需要遍历数组值。

正如你在前面几章中已经知道的，JavaScript数组没有max()方法，但是Math有，所以我们可以应用Math.max()方法，如下所示:

var numbers = [2, 5, 6, 4, 3, 7];

// 使用Math.max apply
var max = Math.max.apply(null, numbers);
alert(max); // : 7

注意: call()和apply()的第一个参数是要调用函数的对象，使用null作为第一个参数就像调用函数而不为函数内部的this指针提供任何对象一样。

新的ES6扩展操作符提供了一种更短的方法来获得数组的最大值或最小值，而无需使用apply()方法。这里有一个例子:

var numbers = [2, 5, 6, 4, 3, 7];

// 使用扩散操作符
var max = Math.max(...numbers);
alert(max); // : 7

但是，如果数组中元素太多(例如，成千上万)，那么spread(…)和apply()都将失败或返回错误的结果。在这种情况下，你可以使用array .reduce()查找数值数组中的最大值或最小值，方法是比较每个值，如下所示:

var numbers = [2, 5, 6, 4, 3, 7];

// 使用reduce方法
var max = numbers.reduce(function(a, b) {
    return Math.max(a, b);
});
alert(max); // : 7