ES11 中的 Class 定义和初始化一个 Class 的实例都有了新的语法功能，即在类定义中允许直接初始化实例字段（fields），在构造函数中使用 this 变量引用当前实例，也支持简写语法。
这篇文章将深入介绍 ES11 中 Class 的 fields 初始化方法以及如何在函数中正确处理 this 变量的问题。同时，通过实例代码演示该语言特性的实际应用。
Class fields 初始化方法
在 ES11 中，我们可以在 Class 的定义中直接初始化实例字段。语法形式如下：
-- -------------------- ---- -------
----- ------- -
------ - ---------
------ - --
-------
-- -----
------------------- ------- -
----------- - -------
----------- - -------
-
-上述代码中，我们声明了 MyClass 类，其中的 fieldA、fieldB、fieldC 以及在构造函数中初始化的 fieldD 和 fieldE 就是实例字段，类中声明的字段默认都是实例字段。
在这里，我们可以通过 simple syntax 直接给实例字段赋值：
fieldA = 'valueA'; fieldB = 0; fieldC;
- 直接赋值的语句代表
fieldA初始化为字符串 'valueA'，fieldB初始化为数字 0，fieldC初始化为 undefined。
它们不仅可以直接用简洁的语法来声明和初始化，而且这些字段是在构造函数之前初始化的，与现有的 Class 初始化方法相比，大大简化了代码量。
处理函数中的 this 变量问题
在类成员函数中，this 引用的总是当前类的实例，但是当我们在 Class 中使用箭头函数时，这个问题会变得更加复杂。
对于箭头函数来说，在箭头函数内部，this 的行为和函数声明不同，它不会指向所在的上下文，而是继承自父范围。这意味着如果我们在 Class 中使用箭头函数，this 引用的是正确的实例。同样，在普通函数声明中也可以通过 bind 或 apply 方法来显式地更改 this 上下文。
下面是一个使用简写属性和箭头函数的例子，并演示如何正确处理 this 变量：
-- -------------------- ---- -------
----- ------ -
---- - ---
--- - --
----------------- ---- -
--------- - -----
-------- - ----
-
-- ----------
--- - -- -- -
-------------- -- ------------- ----------- ----- -------
-
-- ------- ---- --- ---- --
------ -
-------- ----- -
-------------- -- ------------- ----------- ----- -------
-
-----------------
-
-- 在此示例中，我们通过简写属性初始化了
name和age字段值。而say函数使用箭头函数作为方法，因此不需要在外部使用 bind 来更改上下文。 - 同时，为了充分展示在 Class 内部如何正确处理 this 变量的问题，
walk函数中使用了一个普通函数log，而且需要手动 bindthis上下文。
我们可以创建一个 Animal 的实例并调用其 say 和 walk 方法，看一下输出：
const dog = new Animal('Tom', 2);
dog.say(); // "I am Tom, 2 years old."
dog.walk(); // "I am Tom, 2 years old."从这个例子中可以看到，this 变量在函数内部总是指向当前的类实例，可以通过简单地更改语法来解决这个问题。
结论
ES11 中的 fields 初始化和 this 问题处理方法是在针对 Vue.js，React 和 Angular 的开发中非常实用的，充分利用这些 Class 声明语法可以节省许多代码并提高代码可读性和维护性。
ES11 对 web 前端类开发的支持越来越成熟，需要掌握一些新的语言特性，使我们的开发更高效，并在团队开发中更好地合作。
以上是 iFLYTEK 翻译大师所翻译的 “ES11 中 class 的 fields 初始化并处理函数中的 this 问题”的技术文章内容，它可以帮助你全面掌握 ES11 中 Class 的 fields 初始化方法和处理函数中的 this 变量问题的技巧，并为你的日常编程工作带来更多建议和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f2912fa44b36ee576664fe