在 ES6 版本中，加入了 Class 语法糖，它可以让我们更加快捷地构建 JS 类和对象。但是在使用 Class 语法糖时，我们也容易遇到 this 指向问题。
Class 语法糖的基本用法
Class 语法糖是基于 ES5 中的原型链和构造函数实现的。使用 Class 语法糖，我们可以通过 class 关键字来定义一个类：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
----- -
--------------- ---- -- ------------- - -- ----------- ----- -------
-
-
--- ---- - --- -------------- ---
----------- -- -- ---- -- ----- - -- - ----- ----上述代码中，Animal 类有两个属性和一个方法，我们可以通过 new Animal 来实例化一个 Animal 对象，并调用它的 say 方法。
this 指向问题的解决方案
在 Class 语法糖中，this 在方法中的作用和 ES5 的函数中是一样的。但是在一些情况下，我们容易遇到 this 指向问题，比如：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
-------- -
--------------------- -
------------------------- -- -- ----- -------
-- ------
-
-
--- - - --- --------------
----------- -- --------- -- -- ----- ----在上述代码中，this 指向问题导致 setTimeout 中的 this 并未指向 Person 对象。我们可以通过箭头函数或者 bind 方法来解决这个问题：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
-------- -
------------- -- -
------------------------- -- -- ----- -------
-- ------
-
-
--- - - --- --------------
----------- -- --- -- -- ----- ------ -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
----------- - -----------------------
-
-------- -
--------------------- -
------------------------- -- -- ----- -------
------------- ------
-
-
--- - - --- --------------
----------- -- --- -- -- ----- ----构建 JS 组件库
在实际开发过程中，我们通常需要构建一些组件库来提高代码重用率和可维护性。下面我们以一个弹窗组件为例，来介绍如何使用 Class 语法糖实现一个组件：
-- -------------------- ---- -------
----- ----- -
-------------------- -
------------ - ---------------
------ ---
-------- ---
------- ---
----- -- -- ---
--------- -- -- --
-- ---------
---------- - ------------------------------
----------------------------------
-------------------- - -
---- --------------------
---- -----------------------------------------------
---- ---------------------------------------------------
---- -------------------------------------------------
---- ----------------------
------- -----------------------------------
------- -------------------------------------------
------
------
--
---------------------------------------------------------------------- -------------------
-------------------------------------------------------------------------- -----------------------
-
------ -
--------------------------------------
-
------ -
--------------------------------------
-
-
--- - - --- -------
------ --------
-------- --------
------- ---
----- -- -- -
------------------
--
--------- -- -- -
----------------------
-
---
---------
------------- -- -
---------
-- ------在上述代码中，我们首先定义了一个 Modal 类，并在构造函数中初始化弹窗组件的各项属性和样式。然后我们可以通过 show 和 hide 方法来控制弹窗的显示和隐藏。最后通过实例化一个 Modal 对象，并调用它的 show 方法来显示这个弹窗组件。
总结
以上是 ES6 中的 Class 语法糖和 this 指向问题的介绍和应用实例。在实际开发过程中，我们需要充分理解 Class 语法糖的原理和使用技巧，从而构建高质量的 JS 组件库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5f6a3f6b2d6eab316cd5b