随着前端开发的日益发展，JavaScript 成为了数一数二的流行语言之一。ES6 中引入了 class 语法，让 JavaScript 更加面向对象化，代码更加结构化和可读性更好。本文将深入探讨 ES6 中 class 的用法和特点。
class 的定义和基本语法
在 ES6 中，class 可以看做是对象的模板，通过 class 定义一个类，然后通过这个类来创建对象。class 的基本语法如下：
----- --------- - -- ----- -------- -
其中，ClassName 是类名，class 定义的类会被解析成一个函数。在 class 定义中，我们可以定义类的属性和方法，例如：
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- ----------------
-
-
----- -- - --- -------------- ----
----------- -- ---- --- ------在上面的例子中，我们定义了一个 Person 类，这个类有两个属性 name 和 age，以及一个方法 sayHi。使用 new 关键字创建 Person 类的实例对象，然后通过实例对象调用其 sayHi 方法。
constructor 构造函数
constructor 是 class 的构造方法，当使用 new 关键字创建实例对象时，constructor 方法会被自动调用。我们可以在 constructor 中定义实例对象的属性和方法。
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- ----------------
-
-
----- -- - --- -------------- ----
-------------------- -- --在上面的例子中，我们通过 constructor 方法定义了 Person 类的两个属性 name 和 age，并在创建 Person 类的实例对象时传入了对应的参数。
类的属性
在 class 中定义属性的方式有两种：静态属性和实例属性。
静态属性
静态属性是类的属性，和实例对象无关，可以通过类来访问。静态属性的定义方式是在 class 中使用 static 关键字定义。
----- ------ -
------ ------- - ----- ---------
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- ----------------
-
-
---------------------------- -- ----- --------在上面的例子中，我们定义了一个 species 静态属性，它属于 Person 类，可以通过 Person.species 访问。
实例属性
实例属性是实例对象拥有的属性，只能通过实例对象来访问。实例属性的定义方式是在 constructor 中使用 this 关键字定义。
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- ----------------
-
-
----- -- - --- -------------- ----
-------------------- -- --在上面的例子中，我们定义了两个实例属性 name 和 age，然后可以通过 p1.age 的方式访问实例属性。
类的方法
在 class 中定义方法时，它们都会被定义在类的原型中。类的方法可以接收参数，并且方法内部可访问实例对象的属性和其他方法。我们可以在方法中使用 this 关键字来引用实例对象。
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
------- -
---------------- --- ----------------
-
----------- -
-----------
---------------- --- ---------------
-
-
----- -- - --- -------------- ----
----------- -- ---- --- ------
--------------- -- ---- --- ----在上面的例子中，我们定义了两个方法 sayHi 和 growOlder，前者是一个无参方法，后者有一个部分参数传递，而且在方法中通过 this.age++ 修改了实例属性 age。
类的继承
在 ES6 中，class 支持继承，我们可以通过继承来扩展类的功能。在继承中，子类会继承父类的属性和方法，并且可以在子类中添加新的属性和方法。我们可以使用 extends 关键字来实现继承。
----- ------ -
----------------- -
--------- - -----
-
------ -
-------------------------
-
----------- -
-------------------
-
-
----- --- ------- ------ -
----------------- ----- -
------------
--------- - -----
-
----------- -
----------------- --------
-
------ -
-------------------------
-
-
----- -- - --- ------------ ---
--------------------- -- -
---------- -- -----------
--------------- -- ----- ------
---------- -- -----------在上面的例子中，我们定义了一个 Animal 父类和一个 Dog 子类。在 Dog 子类中使用 super 来调用父类的 constructor 方法，然后在 Dog 子类中定义了两个新方法 makeSound 和 bite。我们通过 d1.bite() 的方式来调用 Dog 子类中的 bite 方法。
好处和指导
ES6 中的 class 可以使代码更加结构化、可读性更好，深入了解这个特性，实际上也会更加深入地理解 JavaScript 面向对象的特性。使用 class 来定义对象可以使代码的功能更加清晰、代码维护更方便、可读性更高。
建议开发者在编写 JavaScript 代码时，尽可能地使用 ES6 class。
结论
本文深入讨论了 ES6 中 class 的用法和特点，介绍了如何定义类和属性、扩展类的方法、以及如何使用继承。ES6 中的 class 使得 JavaScript 更加面向对象化，使代码更加清晰、维护更方便、可读性更高。希望本文能够帮助您更好地理解 ES6 中 class 的用法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6732da110bc820c5823f30b3