JavaScript 的这个难点，毁掉了多少程序员？

Ja vaScript 中的 this：从“善变魔术师”到“可驯服的野马”

如果说Ja vaScript有什么特性能让新手困惑、让老手偶尔翻车，this关键字绝对榜上有名。它不像其他语言那样指向明确，反而像个善变的魔术师，其指向完全取决于函数被调用的“姿势”。这种动态特性，正是理解Ja vaScript核心机制的关键一环，也是通往高阶开发的必经之路。

this 的魔幻之旅：让人捉摸不透

先别急着头疼。这种看似“魔幻”的行为背后，其实有一套清晰的逻辑。关键在于，你不能只看函数定义在哪，而要关注它是如何被调用的。几个简单的例子就能让你立刻感受到这种差异。

上面这个例子展示了call方法的威力——它能“显式”地告诉函数：“嘿，你的this现在指向这个对象！”于是，identify和speak函数中的this便乖乖地分别指向了me和you。

再看一个更常见的场景：

这里发生了什么？obj.foo()以对象方法的形式调用，this自然指向obj。而第二行foo()被独立调用，在非严格模式下，它的this就指向了全局对象（浏览器中是window）。看，仅仅是调用方式的不同，就导致了截然不同的结果。

this 的四种绑定规则：理解背后的逻辑

剥开神秘的外衣，this的指向其实只遵循四条核心规则。掌握它们，你就掌握了主动权。

默认绑定

当函数被独立调用时，这条规则就会生效。在非严格模式下，this会绑定到全局对象；在严格模式下，它则是undefined。这是许多意外的根源。

隐式绑定

当函数作为一个对象的方法被调用时，this会“隐式”地绑定到那个调用它的对象上。这符合大多数人的直觉。

显式绑定

如果你不想依赖调用上下文，想自己说了算，那就用call、apply或bind方法。它们能“显式”地指定this的指向，非常霸道且有用。

new 绑定

使用new关键字调用构造函数时，this会绑定到那个新创建的对象实例上。这是面向对象编程的基石。

箭头函数：this 的一股清流

ES6带来的箭头函数，算是给this的混乱世界注入了一股清流。它没有自己的this，其内部的this继承自定义时所在的外层作用域，而且一旦确定就“至死不渝”，不会被任何方式改变。

在这个例子里，bar作为箭头函数，它的this在定义时就锁定了外层foo函数的this。由于foo通过call被绑定到了obj1，所以无论后面怎么调用bar，它的this都坚定地指向obj1。这在处理回调函数时尤其省心。

为何 this 如此重要？

费这么大劲理解this，到底值不值？答案是肯定的。它的身影遍布关键场景：

• 面向对象编程：在类和对象的方法中，全靠this来访问实例自身的属性和方法。
• 事件处理：在DOM事件处理函数中，this通常指向触发事件的元素，这是实现交互的基础。
• 回调函数与异步编程：在setTimeout、Promise或各类库的回调中，this的指向常常发生意外变化，是bug的高发区。
• 现代库与框架：React、Vue等框架的组件机制、状态管理，都深度依赖对this的正确理解和运用。

驯服 this 这匹野马：最佳实践

理解了规则，接下来就是如何驾驭它。这里有几个经过实战检验的建议：

1. 判断调用位置：遇到this问题，第一反应不是看函数定义，而是看它在哪里、以何种方式被调用，然后套用四条规则。
2. 慎用默认绑定：在模块化开发或严格模式下，默认绑定常常指向undefined，容易导致错误。明确意图时，优先考虑显式绑定。
3. 锁定this指向：当你需要确保回调函数中的this不变时，箭头函数是你的好朋友；或者，提前使用bind进行硬绑定。
4. 借助工具：使用ESLint等静态检查工具，或直接采用TypeScript，可以在编码阶段就发现许多潜在的this绑定问题。
5. 实践出真知：多写、多调试、多思考。亲手踩几个坑，比读十篇文章印象更深刻。

说到底，this的复杂性是Ja vaScript设计灵活性的副产品。它或许初看令人畏惧，但一旦掌握了其内在规律，就能从“善变的魔术师”变为手中“可驯服的野马”，让你在编写面向对象、响应式交互和复杂异步流程的代码时，更加得心应手，游刃有余。