函数调用的秘密武器：call、apply与bind
2023-08-12 08:34:54
函数调用的艺术：call、apply和bind揭秘
1. call：改变执行上下文的神奇魔杖
想象一下，你正在建造一座摩天大楼，突然意识到某些材料缺失。传统方法是不得不拆除整栋建筑来获取材料，但call方法却提供了一种优雅的解决方案。它允许你指定执行时的"this"值，就好像材料突然从仓库中凭空出现一样。
例如，让我们定义一个问候函数greet：
function greet() {
console.log(`Hello ${this.name}`);
}
现在，想象我们想要向John问好，但greet函数原本属于另一个对象。借助call方法，我们可以让greet在John对象上执行：
const person = {
name: 'John'
};
greet.call(person); // 输出：Hello John
瞧！call方法将greet的执行上下文更改为person，使它能够正确地输出"Hello John"。
2. apply：用参数数组照亮函数之路
现在，想象你有一堆披萨派对客人，你需要用不同数量的披萨来招待他们。apply方法就像一个装满披萨的大箱子，它允许你将一个参数数组传递给函数，就好像披萨奇迹般地出现在派对上一样。
例如，让我们定义一个求和函数sum：
function sum() {
return [...arguments].reduce((a, b) => a + b, 0);
}
现在，我们想要对数组[1, 2, 3, 4, 5]求和。apply方法可以轻松搞定：
const numbers = [1, 2, 3, 4, 5];
console.log(sum.apply(null, numbers)); // 输出：15
apply方法将numbers数组作为参数传递给sum函数，得到了正确的总和15。
3. bind：预设参数的魔法大师
bind方法就像一个会变魔术的魔术师，它可以预先设置函数的参数，让函数在被调用时自动获得这些参数，就好像魔术棒轻轻一挥，参数就奇迹般地出现在函数中。
例如，让我们再次使用greet函数，但这次我们想要预先绑定person对象作为它的"this"值：
const greetJohn = greet.bind(person);
greetJohn(); // 输出：Hello John
bind方法将greet函数绑定到person对象，创建了一个新的函数greetJohn。当调用greetJohn时，它的"this"值自动指向person，输出正确的"Hello John"。
4. call、apply和bind的应用场景
掌握call、apply和bind，你将拥有改变函数执行上下文和预设参数的超级能力。这些技巧在以下场景中大放异彩：
- 改变函数执行上下文： 通过在任何对象上调用函数，扩展函数的适用范围。
- 作为参数传递函数： 将函数作为参数传递给其他函数，实现高阶函数的强大功能。
- 创建预绑定函数： 创建新的函数，预先绑定"this"值和参数，实现代码重用和模块化。
- 面向对象编程： 在面向对象编程中，实现继承和多态性，构建更灵活、可扩展的代码。
常见问题解答
- call和apply有什么区别？
- call接受单独的参数，而apply接受参数数组。
- bind和call、apply有什么区别？
- bind不立即调用函数，而是返回一个已预绑定"this"值和参数的新函数。
- 为什么应该使用call、apply和bind？
- 它们提供了改变函数执行上下文和预设参数的灵活性，使代码更加简洁、可维护。
- 什么时候应该使用call、apply或bind？
- 根据需要传递的参数数量和预绑定的"this"值，选择最合适的函数调用方法。
- 如何使用call、apply和bind进行面向对象编程？
- 借助bind，可以预先绑定对象作为函数的"this"值，从而实现继承和多态性。
结论
掌握call、apply和bind的艺术，将让你的代码宛如大师之作。这些强大的函数调用技巧赋予了你操纵函数执行上下文和预设参数的能力，让你可以构建更加灵活、优雅和可维护的代码。快去探索它们的无限潜力，让你的代码闪耀夺目光彩吧！
