更好的理解 ECMAScript 2019 中的 class 和继承

在 ECMAScript 2015 中引入了 class 和继承的概念，这使得 JavaScript 的面向对象编程更加规范和易于理解。在 ECMAScript 2019 中，class 和继承得到了进一步的加强和优化。本文将介绍 ECMAScript 2019 中 class 和继承的新特性，以及如何更好地理解和应用它们。

class 的新特性

class 的私有字段

在 ECMAScript 2019 中，class 支持私有字段。私有字段只能在 class 内部访问，外部无法访问。私有字段以 # 开头。

// javascriptcn.com 代码示例
class Person {
  #name;

  constructor(name) {
    this.#name = name;
  }

  getName() {
    return this.#name;
  }
}

const person = new Person('Tom');
console.log(person.getName()); // Tom
console.log(person.#name); // 报错，#name 是私有字段，外部无法访问

class 的静态私有字段

在 ECMAScript 2019 中，class 支持静态私有字段。静态私有字段只能在 class 内部静态方法访问，外部无法访问。静态私有字段以 # 开头，并且在 static 关键字之后声明。

// javascriptcn.com 代码示例
class Person {
  static #age;

  static setAge(age) {
    this.#age = age;
  }

  static getAge() {
    return this.#age;
  }
}

Person.setAge(18);
console.log(Person.getAge()); // 18
console.log(Person.#age); // 报错，#age 是静态私有字段，外部无法访问

class 的可选 catch 绑定

在 ECMAScript 2019 中，class 的 catch 子句支持可选绑定。如果 catch 子句中不需要绑定错误对象，可以省略绑定变量。

try {
  // ...
} catch {
  // ...
}

继承的新特性

继承原生对象

在 ECMAScript 2019 中，可以继承原生对象，比如 Array、Date 等。

class MyArray extends Array {
  // ...
}

const myArray = new MyArray();
myArray.push(1, 2, 3);
console.log(myArray.length); // 3

super 的引用

在 ECMAScript 2019 中，可以在子类中使用 super 引用父类的静态方法和静态属性。

// javascriptcn.com 代码示例
class Animal {
  static getType() {
    return 'animal';
  }
}

class Dog extends Animal {
  static getType() {
    return super.getType() + ', dog';
  }
}

console.log(Dog.getType()); // animal, dog

继承的可选 catch 绑定

在 ECMAScript 2019 中，继承也支持可选 catch 绑定。

// javascriptcn.com 代码示例
class MyError extends Error {
  // ...
}

try {
  // ...
} catch (e) {
  if (e instanceof MyError) {
    // ...
  } else {
    // ...
  }
}

try {
  // ...
} catch {
  // ...
}

使用示例

下面是一个使用 class 和继承的示例，实现一个简单的计算器。

// javascriptcn.com 代码示例
class Calculator {
  constructor() {
    this._result = 0;
  }

  get result() {
    return this._result;
  }

  add(value) {
    this._result += value;
    return this;
  }

  subtract(value) {
    this._result -= value;
    return this;
  }

  multiply(value) {
    this._result *= value;
    return this;
  }

  divide(value) {
    this._result /= value;
    return this;
  }
}

class ScientificCalculator extends Calculator {
  square() {
    this._result = Math.pow(this._result, 2);
    return this;
  }

  sin() {
    this._result = Math.sin(this._result);
    return this;
  }

  cos() {
    this._result = Math.cos(this._result);
    return this;
  }
}

const calculator = new ScientificCalculator();
const result = calculator.add(1).subtract(2).multiply(3).divide(4).square().sin().result;
console.log(result); // -0.2425...

总结

ECMAScript 2019 中的 class 和继承得到了新特性的加强和优化，使得 JavaScript 的面向对象编程更加规范和易于理解。本文介绍了 ECMAScript 2019 中 class 和继承的新特性，以及如何更好地理解和应用它们。希望本文对您有所帮助。

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