在 JavaScript 中，类是一种基于原型的编程模式，用于构造和创建具有相似特征和行为的对象。ES6（ECMAScript 2015）引入了类的语法，而 ES2021 则加入了一些有序执行的构造和继承过程的新特性。在本文中，我们将深入了解 ES2021 中类的构造和继承过程，并为您提供详细的指导和示例代码。
构造函数和实例化对象
在 ES6 中，我们可以使用 class 定义一个类，例如下面的示例：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log(this.name);
}
}上述代码定义了一个 Person 类，该类拥有 name 和 age 两个属性，以及一个名为 sayName 的方法。在类的构造函数中，我们通过 this.name 和 this.age 给实例化对象赋值。
接下来我们通过 new 关键字实例化该类：
const person1 = new Person('Tom', 25);
const person2 = new Person('Jerry', 30);
console.log(person1.name, person1.age); // Tom 25
console.log(person2.name, person2.age); // Jerry 30
person1.sayName(); // Tom
person2.sayName(); // Jerry通过 new 关键字可以创建类的实例化对象，我们可以看到每一个实例化对象都有自己的 name 和 age 属性。另外，使用 person.sayName 方法也可以输出每个实例化对象的名字。
构造函数的有序执行过程
在 ES2021 中，类的构造函数的执行过程是有序的，按照以下几个步骤执行：
第一步，创建父类的
this对象：在构造函数执行之前，会创建一个
this对象，并将其设置为父类实例的属性。因此在子类的构造函数中，可以使用this关键字，访问到父类的属性和方法。第二步，初始化父类的属性和方法：
父类的构造函数会按照顺序初始化父类的属性和方法，并将它们添加到
this对象中。第三步，初始化子类的属性和方法：
子类的构造函数会按照顺序初始化子类的属性和方法，并将它们添加到
this对象中。第四步，返回子类的实例化对象：
在子类构造函数执行完成后，会返回子类的实例化对象。
在实践中，我们可以通过实现一个简单的例子来更好地理解这个过程：
class Parent {
constructor() {
this.parentProperty = 'parentProperty';
this.sayHello = this.sayHello.bind(this);
}
sayHello() {
console.log('Hello from parent!');
}
}
class Child extends Parent {
constructor() {
super();
this.childProperty = 'childProperty';
this.sayHi = this.sayHi.bind(this);
}
sayHi() {
console.log('Hi from child!');
}
}
const child = new Child();
child.sayHello(); // Hello from parent!
child.sayHi(); // Hi from child!在上述示例中，我们定义了一个 Parent 类和一个 Child 类， Child 类继承自 Parent 类。子类构造函数中的 super() 方法用于调用父类的构造函数，并初始化父类的属性和方法。我们还定义了一些子类的属性和方法，并在构造函数中将它们添加到 this 对象中。
继承的有序执行过程
在 ES2021 中，类的继承也有一个有序执行过程，遵循以下几个步骤：
第一步，创建子类的原型对象：
在子类继承父类时，会创建一个子类的原型对象，并将其设置为父类的实例。这使得子类能够继承父类的属性和方法。
第二步，初始化父类的原型对象：
父类的原型对象会初始化父类的属性和方法，这些属性和方法可以被子类的原型对象继承。
第三步，初始化子类的原型对象：
子类的原型对象会初始化子类的属性和方法，这些属性和方法会覆盖父类的相应属性和方法。
第四步，返回子类的原型对象：
在子类的原型对象初始化完成后，会返回子类的原型对象。
在实践中，我们可以通过实现一个简单的继承例子来更好地理解这个过程：
class Parent {
constructor() {
this.parentProperty = 'parentProperty';
}
sayHello() {
console.log('Hello from parent!');
}
}
class Child extends Parent {
constructor() {
super();
this.childProperty = 'childProperty';
}
sayHi() {
console.log('Hi from child!');
}
}
const child = new Child();
console.log(child.parentProperty); // parentProperty
child.sayHello(); // Hello from parent!
console.log(child.childProperty); // childProperty
child.sayHi(); // Hi from child!在上述示例中，我们定义了一个 Parent 类和一个 Child 类， Child 类继承自 Parent 类。我们在每个类中定义了一些属性和方法。这些属性和方法将在构造和继承的过程中初始化。我们可以看到，子类实例能够访问到父类的实例属性(如：parentProperty 和 sayHello 方法)，并且能够访问它们自己的属性和方法(如：childProperty 和 sayHi 方法)。
总结
在本文中，我们深入了解了 ES2021 中类的构造和继承过程，包括构造函数和实例化对象、构造函数的有序执行过程以及继承的有序执行过程。现在，您应该能够更好地理解和使用类的语法，同时获得更好的可维护性和可扩展性。为了更好地掌握这些概念，请务必动手实践，编写快速且高质量的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b21d7badd4f0e0ffb48c34