8.1 方法 call
JavaScript 中的 call、bind 和 apply 方法在管理函数的执行上下文时起着关键作用，可以在调用函数时设置 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', '!'); // 输出: 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', '!']); // 输出: 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('!'); // 输出: 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); // 输出: 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)); // 输出: 6
3. 使用 bind 创建具有固定上下文的函数：
bind 方法可用于创建有固定上下文的函数，这在处理事件和回调时特别有用。
在这里，使用 bind 将 getX 函数绑定到 module 对象，以便在调用函数时能正确获取 x 的值。
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // 输出: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // 输出: 42
8.5 现实生活中的示例
使用 call 借用数组方法的示例：
在此示例中，forEach 数组方法通过 call 用于 arguments 对象。
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // 输出: 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); // 输出: [1, 2, 3, 4, 5, 6]
使用 bind 创建部分函数的示例：
使用 bind 创建函数 double，第一个参数固定为 2。
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // 输出: 10
GO TO FULL VERSION