8.1 call 方法
call、bind 和 apply 方法在 JavaScript 中對於控制函數執行的上下文非常重要，讓你可以在函數調用時設定 this 的值。這些技巧對於處理對象和功能性編程非常有用，提供了強大的工具來靈活管理代碼。我們來仔細看一下每個方法，並討論它們的應用例子。
call 方法用給定的 this 值以及以逗號分隔的參數來調用函數。這使我們能夠明確指明應該在什麼上下文中執行函數。
語法：
func.call(thisArg, arg1, arg2 ...);
範例：
在這個例子中，函數 greet 被調用時使用了 person 的上下文，這樣它就可以訪問 person 對象的 name 屬性。
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 apply 方法
apply 方法類似於 call，但它將參數作為數組傳遞。當我們有一個參數數組時，這非常方便。
語法：
func.apply(thisArg, [argsArray]);
範例：
這個例子和前一個類似，但參數是以數組的形式傳遞的。
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 bind 方法
bind 方法創建一個新的函數，當被調用時會使用給定的 this 值。傳遞給 bind 的參數會被設置為新的函數的固定參數。這允許創建具有固定上下文的函數。
語法：
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
範例：
在這個例子中，創建了一個新的函數 boundGreet，它始終在 person 對象的上下文中執行。
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 方法使用詳細說明
1. 使用 call 來繼承方法：
call 方法經常用於讓一個對象繼承另一個對象的方法。這樣可以借用方法及屬性而無需進行顯式繼承。
在這個例子中，Product 構造函數在 Food 對象的上下文中被調用，這樣就可以繼承 name 和 price 屬性。
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. 使用 apply 來傳遞參數數組：
apply 方法在你想要將參數數組傳遞給接受單獨參數的函數時很方便。
在這個例子中，數組 numbers 以分開的參數形式傳遞給函數 sum。
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. 使用 bind 來創建具有固定上下文的函數：
bind 方法允許創建具有固定上下文的函數，這在處理事件和回調時尤其有用。
這裡函數 getX 被綁定到 module 對象中，這樣在調用時可以正確地獲取 x 的值。
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 實際應用例子
使用 call 借用數組方法的範例：
在這個例子中，數組方法 forEach 被用在 arguments 對象上，通過 call。
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
使用 apply 合併數組的範例：
這裡 push 方法通過 apply 被用來合併兩個數組。
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
使用 bind 創建部分函數的範例：
函數 double 創建時第一個參數被固定為2，通過 bind。
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION