ECMAScript 2019：别让 this 指针踩坑
前端开发中经常会遇到 this 指针的问题，特别是在异步编程和类定义中。ECMAScript 2019 中引入了新的语法和功能，可以避免 this 指针的一些常见问题。本文将介绍这些新功能，并提供一些示例代码帮助理解。
问题描述
在 JavaScript 中，this 指针指向当前执行上下文的对象。通常情况下，它指的是函数的调用者，但在某些情况下，它指向全局对象（如果没有使用严格模式）或 undefined（如果使用了严格模式）。下面是一些示例代码：
-----
----- --- - -
----- --------
--------- -
-----------------------
-
--
-------------- ---- -------
-----
-------- -------- -
------------------
-
--------- --------在示例1中，this 指向 obj 对象，因为 sayName() 函数是从 obj 对象上调用的。在示例2中，myFunc() 函数没有调用者，因此 this 指向全局对象。
这种行为可能会导致一些问题。比如，当使用事件处理程序或回调函数时，常常会出现 this 指针错误。
新语法和功能
ECMAScript 2019 中引入了以下新语法和功能，可以避免 this 指针的一些常见问题。
1. 箭头函数
箭头函数是 ECMAScript 2015 中引入的，它对 this 的处理方式与传统函数不同。箭头函数的 this 始终指向定义函数时的上下文，而不是调用函数时的上下文。
下面是一个使用箭头函数的示例：
----- --- - -
----- --------
-------- -- -- -
-----------------------
-
--
-------------- ---- ---------由于箭头函数的 this 指向定义函数时的上下文，而不是 obj 对象，所以 this.name 为 undefined。
2. class 成员初始值设定项
在 ECMAScript 2019 中，类定义支持成员初始值设定项。这使得在类中定义方法时不需要使用 bind() 或箭头函数来绑定 this。
下面是使用成员初始值设定项定义类的示例：
----- ------ -
---- - -------
------------- -
-----
-
--------- -
-----------------------
-
-
----- - - --- ---------
------------ ---- -------在此示例中，成员初始值设定项 name = "Alice" 将 name 属性初始化为 'Alice'。在 sayName() 方法中，this 指向当前类实例，因此可以直接访问 name 属性。
3. optional chaining（可选链）
在 JavaScript 中，使用 && 操作符或三元运算符来处理对象属性的可访问性。而在 ECMAScript 2020 中，可选链操作符提供了更简单、更清晰的解决方案。
如果对象的某个属性不存在，使用可选链操作符，将不会报出 TypeError 错误。
下面是一个使用可选链操作符的示例：
----- --- - -
----- --------
-------- -
----- ---------
-
--
------------------------------- ---- ---------
--------------------------------- ---- ---------在此示例中，可选链操作符 ?. 用来访问 address 对象的 city 和 street 属性。如果 address 对象不存在，则表达式将返回 undefined，而不是报 TypeError 错误。
总结
在 JavaScript 中，this 可能会指向意外的对象，而这可能会导致问题。ECMAScript 2019 引入了新的语法和功能，例如箭头函数、类成员初始值设定项和可选链操作符，可以避免一些常见的 this 指针问题。
我们应该充分了解这些新功能，并正确地应用它们。这将有助于提高代码的可读性、可维护性和稳定性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6487d14048841e989465d0f6