本文深入解析JavaScript中this指向错误的核心原因——方法分离，并系统介绍四种修复方案：使用闭包变量self、采用箭头函数、通过bind手动绑定以及类中的胖箭头方法定义。结合具体代码示例，帮助开发者在不同场景下正确管理函数执行上下文。
JavaScript中解决this指向问题的几种方法
在JavaScript开发中，调整函数的执行上下文，也就是常说的this指向，是一项常见且重要的操作。
例如，我们可以利用数组方法处理类数组对象。
const reduce = Array.prototype.reduce;
function sumArgs() {
return reduce.call(arguments, (sum, value) => {
return sum += value;
});
}
sumArgs(1, 2, 3); // => 6
然而，this的指向往往难以掌控。
开发者经常遇到this指向错误的情况。本文将介绍几种简单有效的方法，将this绑定到预期的对象上。
在深入探讨之前，我们需要一个辅助函数execute(func)，它的作用仅仅是执行传入的函数参数。
function execute(func) {
return func();
}
execute(function() { return 10 }); // => 10
接下来，我们将深入理解this错误的本质：方法分离。
方法分离问题
1. 方法分离问题
假设有一个Person构造函数，包含firstName和lastName字段，以及一个返回全名的getFullName()方法。代码如下：
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = function() {
this === agent; // => true
return `${this.firstName} ${this.lastName}`;
}
}
const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'
当使用new Person('前端', '小智')调用Person函数作为构造函数时，函数内部的this指向新创建的实例。
getFullName()方法返回全名'前端 小智'。如预期所示，方法内的this等于agent实例。
如果我们将agent.getFullName方法传递给辅助函数execute执行，会发生什么？
execute(agent.getFullName); // => 'undefined undefined'
执行结果变为'undefined undefined'，这是this指向错误导致的典型问题。
此时，在getFullName()方法内部，this的值变成了全局对象（在浏览器环境中为window）。由于window.firstName和window.lastName不存在，执行结果即为'undefined undefined'。
这种现象发生的原因在于调用execute(agent.getFullName)时，该方法与其所属对象分离。这实际上变成了一个普通函数调用，而非方法调用。
execute(agent.getFullName); // => 'undefined undefined'
// 等价于:
const getFullNameSeparated = agent.getFullName;
execute(getFullNameSeparated); // => 'undefined undefined'
这就是所谓的“方法分离”。当方法从原对象中分离出来再执行时，this便不再与原始对象关联。
为了确保方法内部的this指向正确的对象，可以采取以下措施：
- 以属性访问器的形式执行方法，即直接调用agent.getFullName()。
- 或者通过静态方式将this绑定到包含该方法的对象，例如使用箭头函数或.bind()方法。
方法分离问题及其导致的this指向错误，通常出现在以下几种场景中：
回调函数中。
// `methodHandler()`中的`this`是全局对象
setTimeout(object.handlerMethod, 1000);
设置事件处理程序时。
// React: `methodHandler()`中的`this`是全局对象
<button onClick={object.handlerMethod}>
Click me
</button>
下面介绍一些实用技巧，当方法与对象分离时，如何使this指向目标对象。
闭包上下文
2. 闭包上下文
保持this指向类实例最简单的方法是使用一个额外的变量self来保存this。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
const self = this;
this.getFullName = function() {
self === agent; // => true
return `${self.firstName} ${self.lastName}`;
}
}
const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'
getFullName()方法通过闭包静态地引用self变量，从而实现对this的手动绑定。
现在，当调用execute(agent.getFullName)时，一切正常运行，因为getFullName()方法内部通过self始终指向正确的值。
使用箭头函数
3. 使用箭头函数
有没有办法在不附加额外变量的情况下静态绑定this？是的，这正是箭头函数的作用。
我们可以使用箭头函数重构Person构造函数。
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = () => `${this.firstName} ${this.lastName}`;
}
const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'
箭头函数以词法方式绑定this，简单来说，它使用定义时外部函数的this值。
建议在所有需要引用外部函数上下文的场景中优先使用箭头函数。
绑定上下文
4. 绑定上下文
让我们更进一步，使用ES6中的class语法重构Person。
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'
execute(agent.getFullName); // => 'undefined undefined'
不幸的是，即使使用新的类语法，execute(agent.getFullName)仍然返回“undefined undefined”。
在类中，使用附加变量self或箭头函数来修复this指向的方法不再适用。
但有一个涉及bind()方法的技巧，可以将方法的上下文绑定到构造函数中。
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = this.getFullName.bind(this);
}
getFullName() {
return `${this.firstName} ${this.lastName}`;
}
}
const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'
在构造函数中执行this.getFullName = this.getFullName.bind(this)，将getFullName()方法绑定到类实例。
此时，execute(agent.getFullName)按预期工作，返回'前端 小智'。
类中的胖箭头方法
5. 类中的胖箭头方法
bind方式略显冗长，我们可以使用更简洁的胖箭头语法。
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
getFullName = () => {
return `${this.firstName} ${this.lastName}`;
}
}
const agent = new Person('前端', '小智');
agent.getFullName(); // => '前端 小智'
execute(agent.getFullName); // => '前端 小智'
通过定义getFullName = () => {…}，该方法被绑定到类实例，即使将方法与其对象分离也能保持正确的this指向。
这是在类中绑定this的最有效且最简洁的方法。
6. 总结
与对象分离的方法会导致this指向错误。可以通过手动使用附加变量self来静态绑定this，但更好的替代方法是使用箭头函数，其本质即为词法绑定this。
在类中，可以使用bind()方法手动绑定构造函数中的类方法。如果不想使用bind这种冗长方式，也可以使用简洁方便的胖箭头语法。
原文：https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter5.md
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。