在 JavaScript 中，类是一种基于原型的编程模式，用于构造和创建具有相似特征和行为的对象。ES6（ECMAScript 2015）引入了类的语法，而 ES2021 则加入了一些有序执行的构造和继承过程的新特性。在本文中，我们将深入了解 ES2021 中类的构造和继承过程，并为您提供详细的指导和示例代码。
构造函数和实例化对象
在 ES6 中，我们可以使用 class 定义一个类，例如下面的示例：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
--------- -
-----------------------
-
-上述代码定义了一个 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对象中。第四步，返回子类的实例化对象：
在子类构造函数执行完成后，会返回子类的实例化对象。
在实践中，我们可以通过实现一个简单的例子来更好地理解这个过程：
-- -------------------- ---- -------
----- ------ -
------------- -
------------------- - -----------------
------------- - -------------------------
-
---------- -
------------------ ---- ----------
-
-
----- ----- ------- ------ -
------------- -
--------
------------------ - ----------------
---------- - ----------------------
-
------- -
--------------- ---- ---------
-
-
----- ----- - --- --------
----------------- -- ----- ---- -------
-------------- -- -- ---- ------在上述示例中，我们定义了一个 Parent 类和一个 Child 类， Child 类继承自 Parent 类。子类构造函数中的 super() 方法用于调用父类的构造函数，并初始化父类的属性和方法。我们还定义了一些子类的属性和方法，并在构造函数中将它们添加到 this 对象中。
继承的有序执行过程
在 ES2021 中，类的继承也有一个有序执行过程，遵循以下几个步骤：
第一步，创建子类的原型对象：
在子类继承父类时，会创建一个子类的原型对象，并将其设置为父类的实例。这使得子类能够继承父类的属性和方法。
第二步，初始化父类的原型对象：
父类的原型对象会初始化父类的属性和方法，这些属性和方法可以被子类的原型对象继承。
第三步，初始化子类的原型对象：
子类的原型对象会初始化子类的属性和方法，这些属性和方法会覆盖父类的相应属性和方法。
第四步，返回子类的原型对象：
在子类的原型对象初始化完成后，会返回子类的原型对象。
在实践中，我们可以通过实现一个简单的继承例子来更好地理解这个过程：
-- -------------------- ---- -------
----- ------ -
------------- -
------------------- - -----------------
-
---------- -
------------------ ---- ----------
-
-
----- ----- ------- ------ -
------------- -
--------
------------------ - ----------------
-
------- -
--------------- ---- ---------
-
-
----- ----- - --- --------
---------------------------------- -- --------------
----------------- -- ----- ---- -------
--------------------------------- -- -------------
-------------- -- -- ---- ------在上述示例中，我们定义了一个 Parent 类和一个 Child 类， Child 类继承自 Parent 类。我们在每个类中定义了一些属性和方法。这些属性和方法将在构造和继承的过程中初始化。我们可以看到，子类实例能够访问到父类的实例属性(如：parentProperty 和 sayHello 方法)，并且能够访问它们自己的属性和方法(如：childProperty 和 sayHi 方法)。
总结
在本文中，我们深入了解了 ES2021 中类的构造和继承过程，包括构造函数和实例化对象、构造函数的有序执行过程以及继承的有序执行过程。现在，您应该能够更好地理解和使用类的语法，同时获得更好的可维护性和可扩展性。为了更好地掌握这些概念，请务必动手实践，编写快速且高质量的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b21d7badd4f0e0ffb48c34