掌控 JavaScript 的 this：从迷失到精准控制

掌控 JavaScript 的this：从迷失到精准控制
在 JavaScript 编程中，this是一个看似简单却极易让人困惑的核心概念。许多开发者在使用对象方法、定时器（如setTimeout）或事件回调时，常常发现this的指向“莫名其妙”地变了——明明是在对象内部调用的方法，结果this却指向了全局对象window，甚至在严格模式下变成undefined，导致程序报错。这种现象被称为 “this被覆盖” 或 “this丢失”。本文将深入剖析其成因，并系统介绍三种主流解决方案：bind绑定、that = this保存上下文、箭头函数放弃this，助你彻底掌握this的命运。
一、为什么this会“丢失”？
要解决问题，先理解根源。JavaScript 中的this并非由函数定义的位置决定，而是由函数被调用的方式动态绑定的。这一机制在大多数场景下非常灵活，但在回调函数中却容易引发意外。
考虑以下代码：

'use strict'; var name = "windowName"; var a = { name: "Cherry", func2: function() { setTimeout(function() { console.log(this.name); // ❌ TypeError: Cannot read property 'name' of undefined }, 1000); } }; a.func2();

表面上看，func2是a的方法，内部的this应该指向a。但实际运行时，setTimeout内部的匿名函数是以普通函数形式被调用的，而非作为a的方法调用。在严格模式下，普通函数的this为undefined，因此访问this.name会抛出错误。
根本原因在于：setTimeout接收的是一个函数引用，它在未来的某个时刻独立执行该函数，此时已脱离原始对象的调用上下文。这就是this“丢失”的本质。
二、解决方案一：.bind()—— 为this订下“婚约”
.bind(obj)是 Function 原型上的方法，它会返回一个新函数，该函数无论何时、何地被调用，其内部的this永远指向传入的obj。这就像为函数和某个对象订下了一纸“婚约”，不可更改。

var a = { name: "Cherry", func1: function() { console.log(this.name); }, func2: function() { setTimeout( function() { console.log(this.name); // ✅ 输出 "Cherry" this.func1(); // ✅ 正常调用 }.bind(a), // 关键：永久绑定 this 为 a 3000 ); } }; a.func2();

.bind()的优势在于精确且持久。即使这个函数被多次传递、嵌套调用，this依然坚如磐石。此外，你可以提前绑定并复用：

const boundFunc = a.func1.bind(a); setTimeout(boundFunc, 1000); // 甚至可以作为事件处理器 button.addEventListener('click', boundFunc);

需要注意的是，.bind()不会立即执行函数，只是返回一个“绑好this”的新函数，因此非常适合用于setTimeout、事件监听等延迟调用场景。
三、解决方案二：that = this—— 借助作用域链“记住”上下文
在 ES6 之前，这是最经典的解决方案。其核心思想是：利用闭包，在外层函数中将this赋值给一个变量（通常命名为that或self），内层函数通过作用域链访问该变量。

var a = { name: "Cherry", func2: function() { var that = this; // 保存当前 this（即 a） setTimeout(function() { console.log(that.name); // ✅ 输出 "Cherry" that.func1(); // ✅ 正常调用 }, 3000); }, func1: function() { console.log(this.name); } }; a.func2();

这种方法依赖于 JavaScript 的词法作用域规则：内部函数可以访问外部函数的变量。由于that是一个普通变量，不受调用方式影响，因此能稳定地指向原始对象。
虽然略显冗余（需额外声明变量），但that = this兼容性极佳（ES3 起支持），逻辑直观，在老项目或不支持 ES6 的环境中仍是可靠选择。
四、解决方案三：箭头函数 —— 主动“放弃”自己的this
ES6 引入的箭头函数（Arrow Function）从根本上改变了this的行为：箭头函数没有自己的this。它的this继承自外层作用域（词法作用域），由定义位置决定，而非调用方式。

var a = { name: "Cherry", func2: function() { // 此处 this 指向 a（因为 a.func2() 调用） setTimeout(() => { console.log(this.name); // ✅ 输出 "Cherry"（继承自 func2 的 this） this.func1(); // ✅ 正常调用 }, 3000); }, func1: function() { console.log(this.name); } }; a.func2();

箭头函数的简洁性和确定性使其成为现代 JavaScript 开发的首选。尤其在 React 等框架中，事件处理函数常用箭头函数避免this问题。
但需警惕一个常见误区：不要在对象字面量中用箭头函数定义方法！

var bad = { name: "Bad", getName: () => { console.log(this.name); // ❌ this 指向外层（可能是 window），不是 bad！ } };

因为对象字面量本身不构成块级作用域，箭头函数的this会向上查找，很可能指向全局对象。
五、三种方案对比与选型建议

六、结语
this的“丢失”并非语言缺陷，而是 JavaScript 动态绑定机制在特定场景下的自然表现。理解其原理后，我们完全可以通过合理的设计主动掌控它。无论是用.bind()订下“婚约”，用that = this留下“备忘录”，还是用箭头函数选择“随父姓”，每种方案都有其适用场景。
作为开发者，关键不在于记住语法，而在于理解机制、权衡利弊、选择最适合当前上下文的工具。当你能自如地在三种方案间切换时，this将不再是你的敌人，而是你构建健壮应用的得力助手。
记住：this的命运，始终掌握在你手中。

原文： https://juejin.cn/post/7584742635485052938