洞悉call、apply和bind的奥妙：用生动的比喻揭开JavaScript函数调用的秘密
2023-12-06 19:18:16
在 JavaScript 中，函数调用是一门微妙的艺术，而 call、apply 和 bind 三位魔法师更是掌握这门艺术的关键。它们能够改变函数的执行上下文，赋予我们灵活调用函数的能力。为了更好地理解它们之间的差异，我们不妨借助一个生动的比喻。
想象一场盛大的宴会，三位魔法师受邀出席。宴会厅里，各色佳肴琳琅满目，香气扑鼻。
call：魔法棒传递
call 魔法师就像一位优雅的侍者，他手持一根神奇的魔法棒。当我们调用 call 时，这根魔法棒就会将函数指向我们指定的上下文对象，就像侍者将菜肴传递给指定的客人一样。
const person = {
name: "John"
};
function greet() {
console.log(`Hello, ${this.name}!`);
}
greet.call(person); // 输出: Hello, John!
在上面的例子中，greet 函数的执行上下文被设定为 person 对象，因此 this 指向 person，从而正确地打印出了 person 的 name 属性。
apply：菜单传递
apply 魔法师则是一位善于处理复杂订单的厨师。他手持一本厚厚的菜单，里面记录着函数所需的所有参数。当我们调用 apply 时，这本菜单就会将参数逐一传递给函数，就像厨师根据菜单为客人准备菜肴一样。
const numbers = [1, 2, 3, 4, 5];
function sum() {
return this.reduce((a, b) => a + b);
}
const result = sum.apply(numbers); // 输出: 15
在这里，apply 方法将 numbers 数组中的元素作为参数传递给 sum 函数，从而正确地计算出了数组元素的和。
bind：魔法绳索
bind 魔法师是一位技艺高超的驯兽师，他手持一条神奇的绳索。当我们调用 bind 时，这根绳索就会将函数牢牢地绑定到指定的上下文对象上，就像驯兽师用绳索牵引动物一样。
const button = document.querySelector("button");
function handleClick() {
console.log(this);
}
const boundFunction = handleClick.bind(person);
button.addEventListener("click", boundFunction);
在这个例子中，handleClick 函数被绑定到了 person 对象上，因此当按钮被点击时，boundFunction 函数内的 this 关键字指向 person，而不是 button 元素。
掌握了 call、apply 和 bind 的用法，我们就如同掌握了函数调用的魔杖，可以随心所欲地改变函数的执行上下文，灵活地处理各种场景。
在实际应用中，这三种函数调用的选择取决于不同的需求。
- call： 当我们需要明确指定函数的执行上下文时，call 是我们的首选。
- apply： 当函数的参数数量庞大或参数需要从数组或类似对象中获取时，apply 能够简化我们的代码。
- bind： 当我们需要创建一种新的函数，同时保持原函数的上下文不变时，bind 可以大显身手。
通过对这三种函数调用的深入理解，我们能够充分利用 JavaScript 的灵活性，编写出更优雅、更强大的代码。愿这篇文章如同一条引路的绳索，带领你领略 JavaScript 函数调用的奇妙世界。
