ES6 中的 Class 是 JavaScript 中的一种新的机制，它提供了一个更加面向对象的编程范式，能够更加清晰地描述数据和操作之间的关系。在本篇文章中，我们将深入理解 ES6 中的 Class 机制，包括 Class 的概念、构造函数、继承、静态方法等内容。
Class 的概念
Class 是 ECMAScript 6 中新增的关键字，用于定义一个“类”。一个 Class 可以看做是一种特殊的“函数”，其内部定义了一个构造函数，用于生成实例对象。例如，下面的代码定义了一个名为 Person 的 Class：
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-这个 Person Class 有一个构造函数 (constructor)，用于创建实例对象，构造函数内部可以定义实例对象的属性和方法。上面的代码还定义了一个 sayHello() 方法，该方法会在实例对象中添加一个 sayHello 方法。
构造函数
上面的代码中，Person Class 中定义了一个构造函数，用于生成实例对象。构造函数的名称与 Class 的名称相同，用于创建实例对象时调用。在构造函数内部，通常会给 this 添加实例对象的属性，如上面的 name 和 age。
--- ------ - --- --------------- ---- ------------------------- -- ------- ------------------------ -- --
这段代码会创建一个名为 person 的实例对象，并设置其 name 和 age 两个属性，分别为“Alice”和 18。
继承
Class 还提供了继承的能力，可以方便地创建一个继承了其他类的新类。例如，下面的代码定义了一个 Student 类，继承了 Person 类。
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- ---- --- --- -- ----- -----------------
-
-这个 Student 类中也有一个构造函数，它通过 super 调用了父类 Person 的构造函数，并添加了实例对象的 grade 属性。这个类还重写了父类中的 sayHello() 方法，以便在输出时包含 grade 属性。
--- ------- - --- -------------- --- ---- ------------------- -- ------- -- ---- -- ---- --- -- ----- ---- --- --- -- ----- ---- -------------------------- -- ----- ------------------------- -- -- --------------------------- -- --
这段代码会创建一个名为 student 的实例对象，其属性 name、age、grade 分别为“Bob”、17 和 10。该实例对象的 sayHello() 方法会输出“Hello, my name is Bob, I'm 17 years old, and I'm in grade 10.”。
静态方法
除了实例方法外，Class 还可以定义静态方法 (static method)，这些方法直接存在于 Class 上面，而不是存在于实例对象上。这些方法通常用于完成一些与组合类有关但与实例对象无关的操作。
例如，下面的代码定义了一个名为 MathUtils 的 Class，其中包含了一个静态方法 sum，用于计算两个数的和。
----- --------- -
------ ------ -- -
------ - - --
-
-使用这个方法时，可以直接通过类名调用：
---------------------------- ---- -- -
总结
在本篇文章中，我们深入理解了 ES6 中的 Class 机制，包括 Class 的概念、构造函数、继承、静态方法等内容。通过使用 Class，我们可以更好地描述数据之间的关系，并更加清晰地组织代码。在实际开发中，我们可以根据需要创建适当的 Class，以便更好地完成任务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a5ff81add4f0e0ffe9e08c