JavaScript 借用方法
在本教程中,您将学习如何从 JavaScript 中的现有对象中借用功能。
从对象中借用方法
在 JavaScript 中,您可以从其他对象借用方法来构建某些功能,而无需继承它们的所有属性和方法。
JavaScript 为所有函数对象提供了两种方法,call() 和 apply(),它们允许调用函数,就好像它是另一个对象的方法一样。 这是一个例子:
var objA = {
name: "object A",
say: function(greet) {
alert(greet + ", " + this.name);
}
}
objA.say("Hi"); // Displays: Hi, object A
var objB = {
name: "object B"
}
/* objB 没有 say() 方法,但它可以从 objA 借用它 */
objA.say.call(objB, "Hello"); // Displays: 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"); // Displays: Hi, object A
var objB = {
name: "object B"
}
/* objB 没有 say() 方法,但它可以从 objA 借用它 */
objA.say.apply(objB, ["Hello"]); // Displays: Hello, object B
使用内置方法
apply() 方法还允许您使用内置方法快速轻松地执行某些任务。 一个这样的例子是使用 Math.max() 和 Math.min() 来找出数组中的最大值或最小值,否则就需要遍历数组值。
正如你在前面的章节中已经知道的那样,JavaScript 数组没有 max() 方法,但 Math 有,所以我们 可以应用 Math.max() 方法,像这样:
var numbers = [2, 5, 6, 4, 3, 7];
// 使用 Math.max 应用
var max = Math.max.apply(null, numbers);
alert(max); // 输出: 7
注意: call() 和 apply() 的第一个参数是调用函数的对象。 使用 null 作为第一个参数就像调用函数而不为函数内部的 this 指针提供任何对象。
新的 ES6 spread operator 提供了一种更短的方法来从数组中获取最大值或最小值,而无需使用 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
