JavaScript 是一门基于原型的语言，因此原型和类是 JavaScript 中非常重要的概念。在 ES11 中，引入了许多新的原型和类的特性，使得我们在编写 JavaScript 代码时更加高效和方便。
ES11 中的 Class
在 ES6 中，JavaScript 引入了 Class 的概念，从而使得我们可以更加容易地组织、管理代码。ES11 中进一步完善了 Class 的机制，提供了更加强大的语法和特性，并允许我们解决原有继承机制的一些限制问题。
Class 的基本语法
定义类的基本语法如下：
-- -------------------- ---- ------- ----- ------- - ------------- - -- ---- - --------- - -- -- - --------- - -- -- - --- ------ - -- ------ - --- ----------- - -- ------ - -展开代码
在上面的例子中，我们定义了一个 MyClass 类，它包含了一个构造函数和三个方法。MyClass 类还包括一个 getter 和 setter。注意到这里我们使用了 ES6 的箭头函数简写方式定义方法和 getter/setter。
类的继承
在 ES11 中，我们可以使用 extends 关键字来实现类的继承。继承了一个类意味着新类继承了基类的所有属性和方法。而且我们也可以在子类中覆盖基类中的方法或者添加新的方法。
class MyChildClass extends MyClass { method3() { // 新方法 } }
在上面的例子中，我们定义了一个 MyChildClass 类，它继承了 MyClass 类，并添加了一个新方法 method3。
Super
在 ES11 中，super 关键字被用来调用父类的构造函数和方法。在构造函数中，我们使用 super() 来调用父类的构造函数；在方法中，我们使用 super.method() 来调用父类的方法。
-- -------------------- ---- ------- ----- ------------ ------- ------- - ------------- - -------- -- -------- - --------- - ---------------- -- ------ - -展开代码
静态方法和属性
在 ES11 中，我们可以声明静态方法和属性，它们属于类本身，而不是属于类实例化后的对象。
-- -------------------- ---- ------- ----- ------- - ------ ---------------- - -- ---- - ------ --- ------------------ - -- ---- - -展开代码
在上面的例子中，我们定义了一个静态方法 myStaticMethod 和一个静态属性 myStaticProperty。
原型的基本使用
在 JavaScript 中，每一个对象都有一个原型，它是一个对象，可以包含属性和方法。当我们访问一个对象的属性或者方法时，如果该对象没有这个属性或者方法，JavaScript 会到它的原型链上去查找。而且我们可以通过调用 Object.create() 方法来手动创建原型。
创建原型
我们可以利用 Object.create() 方法来创建一个对象，并指定它的原型。下面的代码演示了如何手动创建一个原型：
let myPrototype = { myMethod() { console.log("Hello, world!"); }, }; let myObject = Object.create(myPrototype);
在上面的例子中，我们创建了一个原型 myPrototype，并在原型中添加了一个方法 myMethod。然后我们通过 Object.create() 方法创建了一个名为 myObject 的对象，并将 myPrototype 作为参数传递给 Object.create()。
访问原型
当我们通过 myObject.myMethod() 调用 myMethod 方法时，JavaScript 实际上是在 myObject 的原型链上查找该方法。如果存在该方法，则执行它，否则会抛出异常。
console.log(myObject.myMethod()); // 打印 “Hello, world!”
重写原型
我们可以重新定义原型的属性和方法。这可以通过简单地将原型设置为一个新对象来实现。
-- -------------------- ---- ------- --- -------------- - - ------------- - ------------------- --- --------- -- -- ------------------ - --------------- --------------------------------- -- ------ -------- -- ------------------------------------ -- -- ------- --- -------展开代码
在上面的例子中，我们定义了一个新原型 myNewPrototype，将 myObject 的原型设置为 myNewPrototype。接着我们尝试访问 myObject.myMethod()，但该方法不再存在。而 myNewMethod 方法则可以正常访问。
原型的继承问题
继承也可以应用于 JavaScript 的原型。通过原型继承，我们可以在一个对象的原型上重用代码的共享部分。这将帮助我们减少重复代码和提高代码的可维护性。
继承
我们可以通过在原型上定义一个新对象来继承一个已有的原型：
let myInheritedPrototype = Object.create(myPrototype); myInheritedPrototype.myNewMethod = function () { console.log("Hello, inherited world!"); };
在上面的例子中，我们从 myPrototype 创建了一个新的原型 myInheritedPrototype，并在该原型上定义了一个新方法 myNewMethod。
调用父级方法
在 JavaScript 中，我们可以使用 call() 方法来调用一个方法并设置它的 this 上下文。我们可以使用 call() 来调用原型链上的前一个对象中定义的方法，以此来实现复杂的继承关系。
-- -------------------- ---- ------- --- ------------------ - - ---------- - ------------------- -------- --------- -- -- --- -------------------- - ---------------------------------- ----------------------------- - -------- -- - --------------------------------------- ------------------- ---------- --------- --展开代码
在上面的例子中，我们定义了一个原始对象 myObjectWithMethod，并在该对象上定义了一个方法 myMethod。然后我们从 myObjectWithMethod 创建了一个新对象 myObjectThatInherits，并在该对象上重写了 myMethod 方法。
为了确保继承了以前的方法，我们使用 call() 方法来调用方法 myMethod 并指定 this 的上下文。至此，我们已经学会了原型和类的基本用法以及继承问题的解决方法。希望这篇文章能对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf6e530c976d473a40bb85
