Function的神秘小助手：call、bind、apply 彻底搞懂！
2023-01-13 20:30:32
揭秘 JavaScript 中的 call、bind 和 apply：你的函数调用魔术师
在 JavaScript 的神奇世界里，有三个鲜为人知的小帮手，它们能改变函数调用的规则，赋予你掌控 this 指向的超能力。让我们揭开 call、bind 和 apply 的神秘面纱，探索它们在函数编程中的强大功能。
call：直接召唤，简单有效
就像一位无所畏惧的勇士，call 方法直接召唤函数，将你的意志强加在其上。它以第一个参数设定 this 指向，就像给函数戴上了指向你的王冠。随后的参数成为函数的普通士兵，忠实地执行你的命令。
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 让函数向约翰问好
greet.call(null, 'John'); // 输出：Hello, John!
apply：参数成阵，一网打尽
apply 方法与 call 类似，但它的参数更像一支整齐的军队。它将第一个参数作为 this 指向，而第二个参数是一支参数数组，犹如一队士兵排列整齐。这些士兵井然有序地传递给函数，执行你的指令。
function sum(a, b) {
return a + b;
}
const numbers = [1, 2, 3, 4, 5];
// 求数组中数字之和
console.log(sum.apply(null, numbers)); // 输出：15
bind：柯里化大师，预设 this
bind 方法是一位精明的谋略家，它不直接调用函数，而是返回一个新的函数，并预设了 this 指向。就像设置一个陷阱，bind 将 this 指向锁定在第一个参数中。随后的参数成为新函数的固定参数，等待时机成熟时发挥作用。
function greet(name) {
console.log(`Hello, ${name}!`);
}
// 预设函数向约翰问好
const greetJohn = greet.bind(null, 'John');
// 调用预设函数
greetJohn(); // 输出：Hello, John!
何处使用这些小帮手？
这三个小帮手在 JavaScript 函数调用中有着广泛的应用。让我们深入探讨它们各自的用武之地：
-
改变 this 指向： 例如，当你想使用一个对象的属性或方法，但该对象没有定义该属性或方法时，你可以使用 call 或 apply 方法将函数的 this 指向切换到该对象上。
-
函数柯里化： 函数柯里化是指将一个函数的参数固定为某些值，生成一个新的函数。bind 方法非常适合这个目的，因为它可以预设函数的 this 指向和固定参数。
-
事件处理： 在事件处理中，this 指向通常指向触发事件的元素。如果你想让 this 指向一个特定的对象，你可以使用 call 或 apply 方法来改变 this 指向。
总结：你的函数调用掌控者
call、bind 和 apply 赋予你强大的力量，让你可以掌控函数调用中的 this 指向。通过掌握这三个小帮手，你可以灵活运用 JavaScript 函数，写出更加优雅、高效的代码。
常见问题解答
1. call、bind 和 apply 有什么区别？
- call 直接调用函数，并设定 this 指向。
- apply 也直接调用函数，但它的参数是一个数组。
- bind 不调用函数，而是返回一个预设了 this 指向和固定参数的新函数。
2. 如何使用 call 和 apply？
// 使用 call：
functionName.call(thisArg, arg1, arg2, ...);
// 使用 apply：
functionName.apply(thisArg, [arg1, arg2, ...]);
3. 如何使用 bind？
const boundFunction = functionName.bind(thisArg, arg1, arg2, ...);
4. 柯里化有什么好处？
柯里化可以提高代码的重用性，创建更通用的函数。
5. 在哪些情况下使用 call、bind 和 apply？
- 使用 call 或 apply 来改变函数的 this 指向。
- 使用 bind 来进行函数柯里化。
- 在事件处理中使用 call 或 apply 来指定 this 指向。
