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"
}
/* The objA doesn't have say() method, but it can borrow it from 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"
}
/* The objA doesn't have say() method, but it can borrow it from 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];
// Using Math.max apply
var max = Math.max.apply(null, numbers);
alert(max); // Outputs: 7
注意: call()
和 apply()
的第一個引數是在其上函式是被呼叫的物件。使用 null
作為第一個引數就像呼叫函式而不為函式內的 this
指標提供任何物件。
新的 ES6 擴充套件運算子提供了一種在不使用該 apply()
方法的情況下從陣列中獲取最大值或最小值的更短方法。這是一個例子:
var numbers = [2, 5, 6, 4, 3, 7];
// Using spread operator
var max = Math.max(...numbers);
alert(max); // Outputs: 7
但是,如果陣列中包含太多元素(例如數萬個) ,spread
(...
)和 apply()
將失敗或返回錯誤的結果。在這種情況下,你可以使用 Array.reduce()
來查詢數值陣列中的最大值或最小值,方法是比較每個值,如下所示:
var numbers = [2, 5, 6, 4, 3, 7];
// Using reduce method
var max = numbers.reduce(function(a, b) {
return Math.max(a, b);
});
alert(max); // Outputs: 7