在 ES6 中，class 语法糖成为了开发者们获取面向对象编程的便捷方式，其在表现形式和底层实现机制上都与传统的基于原型的面向对象系统有所不同，同时也带来了一些新的用法和特殊的操作。
在这篇文章中，我们将深入剖析 ES6 的 class 语法糖，了解其特性、用法和实现机制，并结合示例代码来帮助读者更好地理解和掌握它。
1. class 的基本语法
在 ES6 中，class 关键字可以用来定义类，也可以使用 extends 关键字来继承别的类：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - ----
-
------- -
---------------- - -- --------------
-
-
----- ------- ------- ------ -
----------------- ------ -
-----------
---------- - -----
-
------- -
-------------- -- -------- -- ----- ---------------
-
-上述代码定义了一个 Person 类和一个 Student 类，其中 Student 类继承了 Person 类，并加入了 study 方法。通过实例化这些类，我们可以创建对象并调用其方法：
let person = new Person('Tom')
person.sayHi() // Hi, I am Tom
let student = new Student('Jane', 7)
student.sayHi() // Hi, I am Jane
student.study() // I am studying in grade 7在这个示例中，我们可以看到 class 的语法糖为我们提供了一种更加清新的方式来声明属性和方法。这些属性和方法都是定义在 class 的原型对象上，也就是说它们是类上的共有属性和方法，可以通过实例调用。
2. 类的继承
作为一种面向对象编程的基本特性，继承也是 class 语法糖的其中一个重要特性。在 ES6 中，我们可以使用 extends 关键字来继承别的类，并通过 super 关键字来调用父类的构造函数和共有方法。
在下面的示例中，我们定义了一个 Animal 类，并使用 extends 关键字定义了一个 Dog 类，它继承了来自 Animal 类的属性和方法：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - ----
-
--------- -
--------------- ---- -- --------------
-
-
----- --- ------- ------ -
----------------- -
-----------
-
--------- -
--------------- ---- -- ------------- --- - -- - -----
-
------ -
--------------------
-
-
--- --- - --- -------------
------------- -- -- ---- -- ------- --- - -- - ---
---------- -- -----从上述代码中我们可以看到，子类继承了父类的属性和方法，并且还可以添加自己的属性和方法。在定义子类时，他们可以覆盖从父类中继承过来的方法，或者添加自己的方法来扩充功能。
3. 类的静态方法和属性
在面向对象编程中，我们知道类在实例化之前，我们也希望在类上定义一些属性和方法，而不需要等到实例化之后再去定义。在 ES6 中，我们可以通过 static 关键字来定义类的静态方法和属性。
在下面的示例中，我们定义一个 Person 类，并为其添加了一个静态方法 create，它可以通过类名直接调用：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - ----
-
------- -
---------------- - -- --------------
-
------ ------------ -
------ --- ------------
-
-
--- ------ - --------------------
-------------- -- --- - -- ---在上述代码中，我们使用 static 关键字定义了一个 create 方法，它的作用是返回一个新的 Person 对象，而不用对其进行实例化。这样，我们就可以通过 Person.create 直接调用该方法。
4. 类的存取器属性
在 ES6 中，我们可以使用 get 和 set 关键字来定义类的存取器属性，这些属性允许我们在读取和设置属性时执行一些自定义的操作，从而提高程序的灵活性和可维护性。
在下面的示例中，我们定义了一个 Circle 类，并添加了一个存取器属性 radius。它允许我们在读取和设置属性时自动计算圆的面积。
-- -------------------- ---- -------
----- ------ -
------------------- -
----------- - ------
-
--- ------ -
------ ------- - ----------- -- -
-
--- ----------- -
----------- - --------------- - --------
-
-
--- ------ - --- ---------
------------------------ -- -----------------
----------- - --
-------------------------- -- -----------------在上述代码中，我们使用了 get 和 set 关键字定义了一个存取器属性 area，通过它可以方便地读取和设置圆的面积。当设置面积时，它会自动更新圆的半径。
5. 类的普通方法和属性
在类中，我们还可以定义一些普通的方法和属性，它们和成员属性和方法一样，但是不能使用 static 关键字来定义静态方法和属性。
在下面的示例中，我们定义了一个 Car 类，并添加了一些普通的属性和方法：
-- -------------------- ---- -------
----- --- -
----------------- ------ -
--------- - ----
---------- - -----
---------- - -
-
------------ -
---------- -- --
------------------------ -- ------------- ------
-
------- -
---------- -- --
------------------- -- ------------- ------
-
--- ---------- -
------ ---
-
-
--- --- - --- ------------ --------
------------------------- -- ---
---------------- -- ----------- -- -- ----
---------------- -- ----------- -- -- ----
----------- -- ------ -- -- ----在上述代码中，我们定义了一个 Car 类，并添加了一些属性和方法，包括 make, model, speed, accelerate, brake 和 topSpeed 等。它们可以帮助我们模拟汽车的基本行驶操作。
6. 总结
通过本文的学习，我们了解到了 class 语法糖作为面向对象编程的基本特性，在 ES6 中提供了更加优雅和简洁的使用方式。我们可以使用 class 来定义类、继承、静态方法和属性、存取器属性、普通方法和属性等。
不过我们也应该意识到，ES6 的 class 语法糖仍然不是真正意义上的面向对象编程，它仍然基于原型，并且存在一些特性和局限性。因此，在选择使用 class 语法糖时，我们也需要结合实际情况进行权衡和取舍。
示例代码：
-- -------------------- ---- -------
-- ------ -
----- ------ -
----------------- -
--------- - ----
-
------- -
---------------- - -- --------------
-
------ ------------ -
------ --- ------------
-
-
-- ------- ---- ------
----- ------- ------- ------ -
----------------- ------ -
-----------
---------- - -----
-
------- -
-------------- -- -------- -- ----- ---------------
-
-
-- ------ -
----- ------ -
----------------- -
--------- - ----
-
--------- -
--------------- ---- -- --------------
-
-
-- --- ---- ------
----- --- ------- ------ -
----------------- -
-----------
-
--------- -
--------------- ---- -- ------------- --- - -- - -----
-
------ -
--------------------
-
-
-- ------ -
----- ------ -
------------------- -
----------- - ------
-
--- ------ -
------ ------- - ----------- -- -
-
--- ----------- -
----------- - --------------- - --------
-
-
-- --- -
----- --- -
----------------- ------ -
--------- - ----
---------- - -----
---------- - -
-
------------ -
---------- -- --
------------------------ -- ------------- ------
-
------- -
---------- -- --
------------------- -- ------------- ------
-
--- ---------- -
------ ---
-
-
-- ----------
--- ------ - --------------------
--------------
--- ------- - --- --------------- --
---------------
---------------
--- --- - --- -------------
-------------
----------
--- ------ - --- ---------
------------------------
----------- - --
--------------------------
--- --- - --- ------------ --------
-------------------------
----------------
----------------
-----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fe864295b1f8cacdd48b28