随着 JavaScript 的广泛应用和不断发展，ECMAScript 2015（以下简称 ES6）在语法方面进行了重大的更新，其中包括类和继承的引入。
类的定义
在 ES6 之前，JavaScript 并没有类这个概念，只有对象、函数等构造器。而 ES6 中引入了类的概念，让 JavaScript 更加面向对象化。
一个最基本的类定义语法如下：
// www.javascriptcn.com code example
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}接下来我们详细解释上述代码的意思。首先，我们通过 class 关键字定义了一个名为 Person 的类。类包含一个 constructor 方法，它是一个特殊的方法，用来创建并初始化对象。
在上面的代码中，我们在 constructor 方法中定义了两个属性 name 和 age，并使用 this 关键字来将它们绑定到类的实例上。我们还定义了一个 sayHello 方法，它会在控制台输出一条问候语。
类的实例化
在 ES6 中，通过 new 关键字来创建类的实例，实例如下：
let person1 = new Person("Tom", 20);
let person2 = new Person("Jerry", 22);
person1.sayHello(); // 输出 "Hello, my name is Tom."
person2.sayHello(); // 输出 "Hello, my name is Jerry."我们可以根据类创建多个实例，并调用类的方法。上述代码会创建两个名为 person1 和 person2 的实例，并使用 sayHello 方法输出问候语。
继承
JavaScript 中的继承是通过原型链实现的，而 ES6 中引入了更加清晰和直观的继承语法。我们可以通过 extends 关键字定义一个类的子类或派生类，下面是一个例子：
// www.javascriptcn.com code example
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
sayHello() {
super.sayHello();
console.log(`I'm a grade ${this.grade} student.`);
}
}在上述代码中，我们创建了一个 Student 类，它是 Person 类的子类。我们使用 extends 关键字来声明 Student 是 Person 的派生类。此外，我们在 Student 类的构造函数中使用 super 关键字来调用其父类的构造函数，并传递 name 和 age 参数。
我们还重新定义了 sayHello 方法，并在其中使用 super 关键字来调用其父类的同名方法，然后输出学生的年级。
示例代码
以下是一个完整的示例代码，包括类和继承的使用：
// www.javascriptcn.com code example
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
}
}
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
sayHello() {
super.sayHello();
console.log(`I'm a grade ${this.grade} student.`);
}
}
let person = new Person("Tom", 20);
let student = new Student("Jerry", 22, 8);
person.sayHello(); // 输出 "Hello, my name is Tom."
student.sayHello(); // 输出 "Hello, my name is Jerry." 和 "I'm a grade 8 student."总结
本文介绍了 ES6 中类和继承的使用方法，它们让 JavaScript 更加面向对象化。类的定义包括了构造函数和方法，实例化类使用 new 关键字，继承使用 extends 关键字。希望这篇文章能够帮助读者深入理解 ES6 中的类和继承，并对前端开发有所启发。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6480651048841e9894fdcf89