ECMAScript 2021（ES12）的类和继承机制-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，ECMAScript 也在不断地更新升级，ES12（也称为 ECMAScript 2021）是其中的一次重要升级，引入了许多新的特性和改进。其中，类和继承机制的改进是 ES12 中的一个重要内容，本文将详细介绍这方面的内容，帮助读者更好地理解和运用这些新特性。

类的基本语法

在 ES6 中引入了类（class）这一概念，ES12 在此基础上进行了一些改进。类的基本语法如下：

// javascriptcn.com 代码示例
class MyClass {
  constructor() {
    // 构造函数
  }

  method1() {
    // 方法1
  }

  method2() {
    // 方法2
  }
}

其中，constructor 方法是类的构造函数，用于初始化对象；method1 和 method2 是类的方法，用于定义对象的行为。我们可以使用 new 关键字来创建类的实例：

const myObj = new MyClass();

类的继承

ES12 中引入了 extends 关键字，用于实现类的继承。继承可以让子类拥有父类的属性和方法，并且可以在此基础上进行扩展。继承的基本语法如下：

// javascriptcn.com 代码示例
class MySubClass extends MyClass {
  constructor() {
    super(); // 调用父类的构造函数
  }

  method3() {
    // 新增方法
  }
}

上述代码中，MySubClass 是 MyClass 的子类，通过 extends 关键字实现继承。在子类的构造函数中，需要调用 super 方法来调用父类的构造函数。子类也可以新增自己的方法，比如上述代码中新增的 method3 方法。

类的私有字段

ES12 中引入了类的私有字段（private fields）的概念，可以用于定义只能在类内部访问的属性。私有字段的基本语法如下：

// javascriptcn.com 代码示例
class MyClass {
  #privateField = 123; // 私有字段

  method1() {
    console.log(this.#privateField); // 可以在类内部访问私有字段
  }
}

const myObj = new MyClass();
console.log(myObj.#privateField); // 报错，无法在类外部访问私有字段

上述代码中，#privateField 是类的私有字段，只能在类内部访问。在类的方法中，可以使用 this.#privateField 来访问私有字段。在类外部，无法访问私有字段。

类的私有方法

除了私有字段，ES12 中还引入了类的私有方法（private methods）的概念，可以用于定义只能在类内部调用的方法。私有方法的基本语法如下：

// javascriptcn.com 代码示例
class MyClass {
  #privateMethod() { // 私有方法
    console.log('private method');
  }

  publicMethod() {
    this.#privateMethod(); // 可以在类内部调用私有方法
  }
}

const myObj = new MyClass();
myObj.publicMethod(); // 输出 'private method'
myObj.#privateMethod(); // 报错，无法在类外部调用私有方法

上述代码中，#privateMethod 是类的私有方法，只能在类内部调用。在类的公共方法中，可以使用 this.#privateMethod() 来调用私有方法。在类外部，无法调用私有方法。

总结

ES12 中引入了类的私有字段和私有方法的概念，可以帮助开发者更好地封装代码，避免意外的访问和调用。同时，ES12 中还对类的继承机制进行了改进，让继承更加灵活和易用。了解和掌握这些新特性，可以帮助开发者更好地设计和实现前端应用。

示例代码

以下是一个使用类和继承的示例代码：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rufus');
dog.speak(); // 输出 'Rufus barks.'

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6574eaaed2f5e1655de1110d