介绍
在 JavaScript 中，ES5 中用函数来实现类的概念，而 ES6 中引入了 class 关键字，让类的定义更加直观且易于理解。ES6 的 class 继承也更加符合面向对象编程的概念。
定义和使用 class
定义一个 class 需要使用关键字 class，后跟类名和一个类体。类体中包含构造函数、属性和方法。
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------ --- --- ----------- ----- -------
-
-在上面的例子中，我们定义了一个类 Person，它有一个构造函数来初始化 name 和 age 属性。它还有一个方法 sayHello，它将打印这个 person 的信息。
我们可以通过执行以下代码来创建一个新的 Person 实例：
const john = new Person('John', 30);
john.sayHello(); // 输出 "Hello, my name is John and I'm 30 years old."类的继承
ES6 类还支持继承。继承可以让我们从一个类中派生出另一个类，新的类可以继承和扩展原来的类。
-- -------------------- ---- -------
----- ------- ------- ------ -
----------------- ---- ------ -
----------- -----
---------- - ------
-
---------- -
------------------- --- ------------- - ------------- ----- -----------
-
-在上面的例子中，我们定义了一个从 Person 类中派生出来的新类 Student。我们使用 extends 关键字来创建 Student 类，并将其继承自 Person。在构造函数中，我们调用了 super() 方法来调用父类的构造函数，并传入 name 和 age 属性。我们还添加了一个新的 grade 属性，并在 sayHello() 方法中重载了它。
我们可以通过执行以下代码来创建一个新的 Student 实例：
const jane = new Student('Jane', 10, '5th');
jane.sayHello(); // 输出 "Hello, I'm Jane, a 5th grade student."ES6 class 与 ES5 的不同之处
ES6 class 和 ES5 中的函数类有很大的不同。以下是一些重要的不同之处：
- class 中的方法不需要使用 function 关键字来声明，也不需要使用逗号来分隔它们。
- class 的方法中默认使用了 strict 模式。
- class 使用 constructor() 方法来定义类的初始化行为。
- super() 方法调用父类的构造函数。在 ES5 中，使用 Object.create(prototype) 来创建新的对象。
- 在 class 中使用 extends 来继承。
结论
ES6 的 class 是 JavaScript 中面向对象编程的重要组成部分。它比 ES5 的函数类更具可读性和可扩展性。同时，ES6 的类还支持继承，让我们可以更容易地创建和管理类之间的关系。在 JavaScript 中，学习和掌握 ES6 的 class 用法是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6721e0bf2e7021665e092bfc