JavaScript 中的 this 关键字一直是令人头疼的问题之一。有时它的值不是预期的，而且它的行为也经常难以预测。 ES6 引入了块级作用域，其中的 let 和 const 与 var 不同，可以创建块级作用域，而解决了一些作用域相关的问题。ES9 这一版本引入了一个新功能 —— 词法范围内的 this（lexical this）。
什么是词法范围内的 this
词法范围内的 this 是 ES9 新增的功能，允许箭头函数使用外部函数块的 this。它与函数定义的位置和上下文无关，因为它是基于词法作用域。这使得箭头函数可以将该关键字作为词法变量，并恰当地保留 this 的值，让其始终引用其外部代码块中的 this 值。
为什么需要词法范围内的 this
在 JavaScript 中，this 提供了对当前函数调用上下文的引用。但是在一些情况下，this 的值是不确定的，这使得编写代码变得困难。考虑以下代码例子：
-- -------------------- ---- ------- -------- ------------ - --------- - ---- - ------------------------ - ---------- - --------------- ---- -- - - ---------- - --- ------ - --- --------------- ---------------- -- -- --- ---- -- ------ --- --- - -------------- ----- -- -- --- ---- -- ----------
在这个例子中，我们创建了一个名为 Person 的自定义构造函数，并为其设置了一个原型方法 sayName。我们通过实例 person 调用 sayName，输出了正确的结果。但是当我们将 sayName 赋值给变量 say 并尝试调用它时，输出了 undefined。出现这种问题的原因是在某些情况下，this 的值会出现错误，并且指向不同的对象。词法范围内的 this 可以解决这个问题。
使用词法范围内的 this
在箭头函数内部使用 this 时，它将使用外部函数块的 this。这是因为箭头函数不会创建其自己的上下文，而是继承自最外层函数的上下文。让我们看一个例子：
-- -------------------- ---- -------
-------- ------------ -
--------- - ----
-------- - -
-------------- -- -
---------- -- ----- ---- -
---------------------
-- -----
-
--- ------ - --- ---------------在该例子中，我们定义了一个 Person 构造函数并为其添加了一个属性和一个原型方法。我们还在构造函数中使用了 setInterval，每秒钟增加一次 age 属性，并将其值打印到控制台。在 setInterval 函数内部使用箭头函数，让它可以访问构造函数的 this。 此时，this 关键字正确地引用了 Person 构造函数中的 this，因此我们可以正确获得 age 的值。
总结
词法范围内的 this 是 ES9 新增的功能，通过使用它，我们可以简化代码并减少代码中的错误。使用词法范围内的 this，可以避免 this 绑定问题，并减少实例化对象出现问题的可能性。当需要访问外部上下文的属性时，箭头函数是一个很好的选择。它们可以更好地利用 JavaScript 函数的词法作用域，避免由于 this 绑定问题而导致的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ad2e43add4f0e0ff6bf5d8