手把手带你搞懂call、apply、bind，JS高手必备神器
2023-03-16 08:02:28
揭开 JavaScript 的强大三重奏：call、apply 和 bind
在 JavaScript 的世界里，有三个强大的方法——call、apply 和 bind——能将你的编码技能提升到一个新的高度。这些方法让你能够以指定上下文调用函数，并灵活地传递参数，使其成为任何 JavaScript 开发人员必备的工具。
Call、Apply 和 Bind：快速概览
- call()： 允许你用指定
this值调用函数，并逐个传递参数。 - apply()： 类似于 call()，但它接受一个参数数组，而不是一个个参数。
- bind()： 创建一个具有预定义
this值和参数的新函数，该函数可以在以后调用。
严格模式与非严格模式：两种截然不同的世界
- 严格模式： 对 JavaScript 代码施加更严格的规则，防止隐式类型转换和未声明变量的使用。
- 非严格模式： JavaScript 的默认模式，允许隐式类型转换，不要求显式声明变量。
当传递 undefined 或 null 时会发生什么？
- call() 和 apply()： 当
this被设置为undefined或null时，它会自动设置为全局对象（例如，浏览器中的window）。 - bind()： 当
this被设置为undefined或null时，它在新建函数中仍保持为undefined或null。
三个方法的实际应用
让我们用一个简单的函数来探索这些方法如何工作：
function greet(name) {
console.log(`Hello, ${name}!`);
}
-
使用 call()：
greet.call(null, "John"); // 输出: "Hello, John!"在此，我们用
null作为this值调用greet()函数，并将 "John" 作为参数传递。由于this被设置为null，它会自动分配给全局对象，"Hello, John!" 将被记录到控制台。 -
使用 apply()：
greet.apply(null, ["John"]); // 输出: "Hello, John!"类似于 call()，我们用
null作为this值调用greet()，但这次我们传递一个包含 "John" 的参数数组。同样，"Hello, John!" 被记录到控制台中。 -
使用 bind()：
const boundGreet = greet.bind(null, "John"); boundGreet(); // 输出: "Hello, John!"在此，我们使用
bind()创建了一个新函数boundGreet，其中this值为null，而 "John" 为预定义参数。当我们调用boundGreet()时，"Hello, John!" 会被记录到控制台中，展示了创建具有预配置参数的新函数的能力。
超越基础：实际应用
- 动态更改
this值： 使用 call() 或 apply() 根据上下文动态更改函数的this值。 - 函数柯里化： 利用 bind() 创建带有预定义参数的新函数，这是一种创建可重用和可定制函数的强大技术。
- 事件处理： 采用 call() 或 apply() 将事件处理程序绑定到特定元素或对象，确保适当的事件传播和处理。
释放你的 JavaScript 术法
掌握 call、apply 和 bind 是任何 JavaScript 开发人员必经之路。这些方法提供了极大的灵活性和强大性，让你能够编写优雅且可维护的代码。拥抱它们，练习它们，看着你的 JavaScript 技能飞升至新高度！
常见问题解答
-
什么是
this值？
this值指的是在函数被调用时，它所隶属的对象。 -
什么时候应该使用 call() 或 apply()，而不是 bind()？
当你需要立即执行函数时，使用 call() 或 apply()。当你想创建一个可以稍后调用的新函数时，使用 bind()。 -
在严格模式下，传递
undefined或null有什么不同？
在严格模式下，传递undefined或null将引发错误，而不会像在非严格模式下那样自动设置为全局对象。 -
如何在函数柯里化中使用 bind()？
通过将 bind() 用于预定义参数，你可以创建新的函数，这些函数接收较少数量的参数，从而实现函数柯里化。 -
call()、apply() 和 bind() 之间有什么主要区别？
- call() 逐个传递参数。
- apply() 通过数组传递参数。
- bind() 创建一个具有预定义
this值和参数的新函数。
