改变 this 指向的艺术：call()、apply() 和 bind()
开场白
嘿，大家好！欢迎来到今天的 JavaScript 技术讲座。今天我们要聊的是一个非常有趣的话题——如何使用 call()、apply() 和 bind() 来改变 this 的指向。如果你曾经在写代码时遇到过 this 不是指向你期望的对象的情况，那么这篇文章绝对能帮到你！
我们知道，JavaScript 中的 this 是一个非常灵活的概念，它可以根据不同的调用方式指向不同的对象。有时候，this 的行为可能会让我们感到困惑，尤其是在函数被传递或嵌套调用时。幸运的是，JavaScript 提供了三种强大的工具来帮助我们精确控制 this 的指向：call()、apply() 和 bind()。
接下来，我们将通过轻松诙谐的方式，结合代码示例，深入探讨这三种方法的使用场景和区别。准备好了吗？让我们开始吧！
1. this 到底是什么？
在进入正题之前，我们先快速回顾一下 this 的基本概念。this 是 JavaScript 中的一个关键字，它指向当前执行上下文中的对象。根据函数的调用方式，this 可以指向不同的对象：
- 全局作用域：在浏览器中，
this指向window对象；在 Node.js 中，this指向global对象。 - 对象方法：当函数作为对象的方法调用时，
this指向该对象。 - 构造函数：当函数作为构造函数调用（使用
new关键字）时，this指向新创建的实例。 - 箭头函数：箭头函数没有自己的
this，它会继承外层作用域的this。
示例 1：this 的不同指向
// 全局作用域
console.log(this); // window (浏览器) 或 global (Node.js)
// 对象方法
const obj = {
name: 'Alice',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
obj.sayHello(); // Hello, my name is Alice
// 构造函数
function Person(name) {
this.name = name;
}
const bob = new Person('Bob');
console.log(bob.name); // Bob
// 箭头函数
const arrowFunc = () => {
console.log(this);
};
arrowFunc(); // window (浏览器) 或 global (Node.js)2. call()：立即调用并改变 this
call() 是最常用的改变 this 指向的方法之一。它的作用是立即调用函数，并将 this 绑定到指定的对象上。call() 的第一个参数是要绑定的 this 值，后面的参数是传递给函数的参数列表。
语法
func.call(context, arg1, arg2, ...);context：要绑定的this值。arg1, arg2, ...：传递给函数的参数。
示例 2：使用 call() 改变 this
const person = {
name: 'Alice'
};
function greet(age, city) {
console.log(`Hello, I'm ${this.name}, ${age} years old, from ${city}.`);
}
greet.call(person, 25, 'New York'); // Hello, I'm Alice, 25 years old, from New York.在这个例子中，greet 函数的 this 被绑定到了 person 对象，因此 this.name 输出的是 Alice。同时，call() 还允许我们传递额外的参数给 greet 函数。
3. apply()：与 call() 类似，但参数不同
apply() 和 call() 非常相似，唯一的区别在于它们传递参数的方式不同。call() 接受多个独立的参数，而 apply() 接受一个参数数组。
语法
func.apply(context, [argsArray]);context：要绑定的this值。[argsArray]：传递给函数的参数数组。
示例 3：使用 apply() 传递参数数组
const numbers = [1, 2, 3, 4, 5];
function sum(...args) {
return args.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum.apply(null, numbers)); // 15在这个例子中，apply() 将 numbers 数组作为参数传递给了 sum 函数。注意，apply() 的第一个参数是 null，这意味着 this 将指向全局对象（window 或 global），因为我们并不关心 this 的值。
call() vs apply()：选择哪个？
- 如果你知道要传递的参数数量是固定的，使用
call()更加直观。 - 如果你要传递一个动态的参数数组，使用
apply()更加方便。
4. bind()：创建一个新的函数并永久绑定 this
bind() 与其他两个方法不同，它不会立即调用函数，而是返回一个新函数，这个新函数的 this 永久绑定到指定的对象。你可以稍后调用这个新函数，this 仍然会指向你最初绑定的对象。
语法
const newFunc = func.bind(context, arg1, arg2, ...);context：要绑定的this值。arg1, arg2, ...：可以预先绑定的参数（可选）。
示例 4：使用 bind() 创建新函数
const person = {
name: 'Alice'
};
function greet(greeting) {
console.log(`${greeting}, I'm ${this.name}.`);
}
const greetAlice = greet.bind(person);
greetAlice('Hi'); // Hi, I'm Alice.
// 你可以在任何时候调用 bind() 创建的新函数
setTimeout(greetAlice, 1000); // 1秒后输出：Hi, I'm Alice.在这个例子中，bind() 创建了一个新的函数 greetAlice，它的 this 永远指向 person 对象。即使我们在 setTimeout 中调用它，this 仍然保持不变。
bind() 的应用场景
- 事件处理程序：当你将一个函数作为事件处理程序传递时，
this通常会被绑定到触发事件的元素。使用bind()可以确保this指向你期望的对象。 - 回调函数：在异步操作中，
this的指向可能会发生变化。使用bind()可以避免这种情况。
5. 总结：call()、apply() 和 bind() 的区别
为了更清晰地理解这三种方法的区别，我们可以通过一个表格来对比它们的功能：
| 方法 | 是否立即调用 | 参数传递方式 | this 是否永久绑定 |
|---|---|---|---|
call() |
是 | 多个独立参数 | 否 |
apply() |
是 | 一个参数数组 | 否 |
bind() |
否 | 可以预先绑定参数 | 是 |
什么时候使用哪种方法？
call()和apply()：当你需要立即调用函数，并且想要临时改变this的指向时，使用call()或apply()。选择哪个取决于你传递参数的方式。bind()：当你需要创建一个新函数，并且希望this永久绑定到某个对象时，使用bind()。这在事件处理程序和回调函数中非常有用。
结语
好了，今天的讲座到这里就结束了！希望你对 call()、apply() 和 bind() 有了更深入的理解。记住，this 的指向是一个非常重要的概念，掌握这些方法可以帮助你在编写 JavaScript 代码时更加得心应手。
如果你还有任何问题，欢迎在评论区留言！下次见啦！👋
引用文献
- MDN Web Docs: "Function.prototype.call()"
- MDN Web Docs: "Function.prototype.apply()"
- MDN Web Docs: "Function.prototype.bind()"
