前言
在过去，JavaScript 中实现面向对象编程是通过原型链来实现的，这样做非常笨拙。而在 ECMAScript 2015 中，引入了 class 语法糖，让这一过程更加简单。在 ECMAScript 2017 中，这个 class 语法糖进一步扩展，我们可以更加方便的使用 constructor、extends 和 super 来创建类（Class）和子类（Subclass）。
在本篇文章中，我们会深入探讨这些新增的 class 语法糖的使用方法，同时附上示例代码，帮助读者更好地理解。
类（Class）
类是一种函数，它具有属性和方法。与函数不同的是，类必须使用 new 关键字来实例化。
创建类
我们可以使用 class 关键字来创建一个类：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
---------------- --- ----------------
-
-上面的代码创建了一个名为 Person 的类，它有两个属性 name 和 age，以及一个名为 sayHello 的方法。这个类通过 constructor 函数来初始化属性。
现在我们可以使用 new 关键字来创建一个 Person 的实例：
const john = new Person('John', 25);
john.sayHello(); // Hi, I'm John.继承
继承是 OOP 中的一个重要概念，它允许我们从一个现有的类中派生出一个新的类。新的类称为子类，现有的类称为基类（或父类）。
在 JavaScript 中，我们可以使用 extends 关键字和 super 函数来实现继承。
下面是一个子类（Developer）继承自一个基类（Person）的示例：
-- -------------------- ---- -------
----- --------- ------- ------ -
----------------- ---- ------- -
----------- ----- -- ----- ----------- --
----------- - -------
-
---------- -
---------------- --- ------------ --- --- - -------------
-
------------ -
--------------- ------ ---- --------------------- -------
-
-在上面的代码中，我们使用 extends 关键字来创建一个类 Developer，这个类是从 Person 类派生出来的。在子类的 constructor 函数中，我们通过 super 函数来调用父类的 constructor 函数，以初始化基类的属性。我们还新增了一个名为 skills 的属性，以及一个名为 showSkills 的方法。
现在我们来创建一个 Developer 的实例：
const jane = new Developer('Jane', 24, ['JavaScript', 'HTML', 'CSS']);
jane.sayHello(); // Hi, I'm Jane and I'm a developer.
jane.showSkills(); // My skills are: JavaScript, HTML, CSS.在上面的代码中，我们通过 new 关键字来创建一个 Developer 的实例，然后调用 sayHello() 和 showSkills() 方法，这些方法是从 Person 类和 Developer 类继承来的。
constructor
constructor 是一个特殊的方法，它会在使用 new 关键字创建类的一个实例时被调用。 constructor 函数负责初始化类的属性。
创建基类
让我们先看一下如何在基类中使用 constructor：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
}在上面的代码中，我们定义了一个 Person 类，并且在其中定义了一个 constructor 函数。
当我们通过下面的代码创建一个 Person 的实例时，这个实例的 name 属性和 age 属性将会被初始化：
const john = new Person('John', 25);
console.log(john); // Person {name: "John", age: 25}创建子类
我们还可以在子类中使用 constructor 函数来初始化子类的属性。
下面是一个子类（Developer）使用 constructor 函数初始化自己的属性的例子：
class Developer extends Person {
constructor(name, age, skills) {
super(name, age); // 调用父类的 constructor 函数
this.skills = skills;
}
}在上面的代码中，我们先通过 super 函数来调用父类的 constructor 函数，然后再初始化子类的属性。
接下来，我们可以通过下面的代码来创建一个 Developer 的实例：
const jane = new Developer('Jane', 24, ['JavaScript', 'HTML', 'CSS']);
console.log(jane); // Developer {name: "Jane", age: 24, skills: Array(3)}在上面的代码中，我们通过 new 关键字来创建一个 Developer 的实例，这个实例的 name 属性、age 属性和 skills 属性都已被初始化。
extends
extends 关键字用于创建子类，这个子类继承了父类的属性和方法。
我们可以通过下面的代码来创建一个子类：
class Developer extends Person {
// ...
}在上面的代码中，我们定义了一个 Developer 类，并用 extends 关键字来表示它是从 Person 类中派生（继承）出来的。
super
在子类的构造函数中，我们可以使用 super 函数来调用父类的构造函数：
class Developer extends Person {
constructor(name, age, skills) {
super(name, age);
// ...
}
}在上面的代码中，我们在子类 Developer 的构造函数中通过 super 调用了父类 Person 的构造函数。这是因为子类必须在调用 this 之前调用父类的构造函数，以确保子类的实例具有所有父类的属性。
除了在子类的构造函数中，我们还可以在子类的方法中使用 super 来调用父类的同名方法。
下面是一个例子：
class Developer extends Person {
// ...
sayHello() {
super.sayHello();
console.log(`I'm also a developer.`);
}
}在上面的代码中，我们在 Developer 类的 sayHello 方法中使用 super.sayHello() 来调用父类 Person 的 sayHello 方法，并输出一个自定义的字符串。
总结
通过本文的讲解，我们了解了 ECMAScript 2017 中新增的 class 语法糖，并讲解了 constructor、extends 和 super 的使用方法。这些知识对于我们在面向对象编程时编写更加清晰和可读性更高的代码非常有帮助。
我们希望本文能够帮助读者更好地掌握 ECMAScript 2017 中的 class 语法糖，也希望读者在了解这些新特性的基础上，能够更好地使用 JavaScript 来构建更加优秀的应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6484475b48841e9894365d1c