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