掌握 bind、apply 和 call，轻松驾驭 JavaScript 函数调用
2023-10-22 23:37:19
概览
在 JavaScript 中，函数调用是语言的核心之一。我们可以通过调用函数来执行代码，从而实现各种各样的功能。然而，有时候我们需要改变函数的执行上下文，也就是改变函数被调用的环境。这时，我们就需要用到 bind、apply 和 call 方法。
bind 方法
bind 方法可以创建一个新函数，这个新函数的执行上下文被绑定到指定的对象上。也就是说，当我们调用这个新函数时，它的 this 将指向绑定的对象，而不是默认的全局对象或调用它的对象。
bind 方法的语法如下：
Function.prototype.bind(thisArg, ...args)
其中：
thisArg是要绑定的对象。...args是要传递给新函数的参数列表。
例如，我们有一个函数 greet，它接受一个名字作为参数，然后打印出 "Hello, [name]!"。
function greet(name) {
console.log(`Hello, ${name}!`);
}
现在，我们想要创建一个新的函数 greetJohn，它的执行上下文被绑定到 john 对象上。这样，当我们调用 greetJohn 时，它的 this 关键字将指向 john 对象，而不是默认的全局对象或调用它的对象。
我们可以使用 bind 方法来创建 greetJohn 函数：
const greetJohn = greet.bind({ name: 'John' });
现在，我们可以调用 greetJohn 函数来打印出 "Hello, John!"：
greetJohn(); // Hello, John!
apply 方法
apply 方法可以调用一个函数，并指定函数的执行上下文和参数列表。
apply 方法的语法如下：
Function.prototype.apply(thisArg, argsArray)
其中：
thisArg是要绑定的对象。argsArray是要传递给函数的参数数组。
例如，我们有一个函数 sum，它接受两个数字作为参数，然后返回这两个数字的和。
function sum(a, b) {
return a + b;
}
现在，我们想要调用 sum 函数，并指定它的执行上下文和参数列表。我们可以使用 apply 方法来做到这一点：
const numbers = [1, 2];
const result = sum.apply(null, numbers); // 3
在上面的代码中，我们使用 null 作为 thisArg，表示不绑定任何对象。我们使用 numbers 数组作为 argsArray，表示将数组中的两个数字作为参数传递给 sum 函数。
call 方法
call 方法与 apply 方法非常相似，唯一不同的是 call 方法的参数列表是单独列出的，而不是作为一个数组传递。
call 方法的语法如下：
Function.prototype.call(thisArg, arg1, arg2, ...)
其中：
thisArg是要绑定的对象。arg1,arg2, ... 是要传递给函数的参数列表。
例如，我们有一个函数 max，它接受两个数字作为参数，然后返回这两个数字中较大的那个。
function max(a, b) {
return Math.max(a, b);
}
现在，我们想要调用 max 函数，并指定它的执行上下文和参数列表。我们可以使用 call 方法来做到这一点：
const numbers = [1, 2];
const result = max.call(null, numbers[0], numbers[1]); // 2
在上面的代码中，我们使用 null 作为 thisArg，表示不绑定任何对象。我们使用 numbers[0] 和 numbers[1] 作为参数，表示将这两个数字作为参数传递给 max 函数。
比较
bind、apply 和 call 三个方法都可以改变函数的执行上下文。但是，它们在使用上有一些区别。
- bind 方法返回一个新的函数，而 apply 和 call 方法直接调用函数。
- bind 方法可以预先绑定一部分参数，而 apply 和 call 方法只能在调用时指定参数。
- bind 方法更适合于创建新的函数，而 apply 和 call 方法更适合于直接调用函数。
总结
bind、apply 和 call 方法都是 JavaScript 中非常有用的工具，它们可以帮助我们灵活地控制函数的调用方式。通过熟练掌握这三个方法，我们可以更加轻松地编写出高质量的 JavaScript 代码。
