在 JavaScript 中，类是面向对象编程中最重要的概念之一。ES6（ECMAScript 2015）引入了一种新的语法来创建类，使 JavaScript 中的类更加运行时真实，更像传统的面向对象编程语言。ES6 类不仅提供了对面向对象编程的支持，而且对之前的 JavaScript 类的一些限制和问题作出了改进。
ES6 类的声明方式
ES6 中，创建一个类的语法如下：
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
-这个例子创建了一个名为 Person 的类。类包括构造函数和一个用于打印人的信息的方法。我们创建一个实例并调用方法：
--- ---- - --- -------------- ---- ---------------- -- ------ -- ---- -- ---- --- - -- -- ----- ----
值得注意的是，构造函数是在创建实例时自动调用的。因此，在 Person 类中将 name 和 age 分配给 this 对象是必要的，以便我们创建新的实例时可以访问它们。
ES6 类的继承
ES6 扩展了 JavaScript 类的继承功能。下面是一个使用继承的例子：
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
----------- -
-------------- -- -- ------- --- -- ----- -- -----------------
-
-这个例子使用 extends 关键字创建了一个新的 Athlete 类。Athlete 类包括一个新成员变量 sport，并且通过 super 调用了父类构造函数。除了构造函数，Athlete 类还包括所谓的 tellSport 方法，用于打印运动员的信息。由于 Athlete 类继承了 Person 类，所以我们可以通过 Athlete 类创建一个新的实例。新的实例不仅具有 Person 中定义的所有属性和方法，而且还包含新的 sport 属性和 tellSport 方法。
--- --- - --- -------------- --- ------------ --------------- -- ------ -- ---- -- --- --- - -- -- ----- ---- ---------------- -- - -- -- ------- --- -- ----- -- ---------
如上所示，每个新创建的实例都将包含 Person 类中定义的成员以及 Athlete 类中定义的成员。
ES6 类的静态成员
在 ES6 中，类还可以定义静态成员。静态成员与类本身关联，而不是与类的实例关联。因此，可以在不创建任何实例的情况下使用它们。
----- ---------- -
------ ------ -- -
------ - - --
-
-这个例子创建了一个名为 Calculator 的类，并定义了一个静态的 add 函数。可以在不创建实例的情况下使用静态成员：
----------------------------- ---- -- -
注意，通过使用 static 关键字，我们将 add 函数定义为静态方法。
总结
ES6 引入的类语法为 JavaScript 提供了更好的面向对象编程支持和更清晰的代码结构。类允许我们创建具有内部状态和行为的对象，并探索面向对象编程语言的更多概念。ES6 类包括构造函数，通过 extends 实现继承和静态成员的定义。这些特性可以更好地处理复杂代码，并提高代码的可读性和可维护性。
完整代码示例：
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- - -- ----------- ----- -------
-
-
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
----------- -
-------------- -- -- ------- --- -- ----- -- -----------------
-
-
----- ---------- -
------ ------ -- -
------ - - --
-
-
--- ---- - --- -------------- ----
---------------- -- ------ -- ---- -- ---- --- - -- -- ----- ----
--- --- - --- -------------- --- ------------
--------------- -- ------ -- ---- -- --- --- - -- -- ----- ----
---------------- -- - -- -- ------- --- -- ----- -- ---------
----------------------------- ---- -- -来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64562c66968c7c53b096c85a