ECMAScript 2020（ES 11）比赛练习 - 面向对象编程

ECMAScript 2020（ES 11）是 JavaScript 语言的最新版本。这个版本引入了许多新的特性和改进，其中包括面向对象编程的一些新特性。本文将深入介绍这些新特性，以及如何使用它们来编写更加优秀的 JavaScript 代码。

类的私有属性和方法

在 ES 11 中，我们可以通过在类的属性名或方法名前面加上 # 符号来将其定义为私有属性或方法。这意味着这些属性或方法只能在类内部使用，无法从外部进行访问或修改。

// javascriptcn.com 代码示例
class MyClass {
  #privateProperty = 0;

  #privateMethod() {
    console.log(`Private property value: ${this.#privateProperty}`);
  }

  setPrivateProperty(value) {
    this.#privateProperty = value;
  }

  callPrivateMethod() {
    this.#privateMethod();
  }
}

const myInstance = new MyClass();
myInstance.setPrivateProperty(42);
myInstance.callPrivateMethod(); // Output: Private property value: 42
myInstance.#privateProperty; // Error: SyntaxError
myInstance.#privateMethod(); // Error: SyntaxError

在上面的示例中，我们定义了一个名为 MyClass 的类，其中包含一个私有属性 #privateProperty 和一个私有方法 #privateMethod。我们还定义了两个公共方法 setPrivateProperty 和 callPrivateMethod，用于设置私有属性的值和调用私有方法。

请注意，我们无法从类的外部访问或修改私有属性和方法，因为它们是私有的。如果尝试这样做，将会抛出一个 SyntaxError 错误。

可选链操作符

在 JavaScript 中，当我们尝试访问一个不存在的属性或方法时，通常会抛出一个 TypeError 错误。在 ES 11 中，我们可以使用可选链操作符 ?. 来避免这种错误的发生。

// javascriptcn.com 代码示例
const myObject = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

console.log(myObject?.foo?.bar?.baz); // Output: 42
console.log(myObject?.foo?.qux?.quux); // Output: undefined

在上面的示例中，我们使用可选链操作符 ?. 来避免访问一个不存在的属性或方法时出现 TypeError 错误。如果访问的属性或方法不存在，将会返回 undefined。

动态导入

在 ES 11 中，我们可以使用 import() 函数来动态导入模块。这意味着我们可以在运行时根据需要加载模块，而不是在编译时将其全部加载进来。

async function loadModule(moduleName) {
  const myModule = await import(`./${moduleName}.js`);
  myModule.myFunction();
}

loadModule('myModule');

在上面的示例中，我们定义了一个名为 loadModule 的异步函数，用于动态导入指定名称的模块。我们使用 import() 函数来加载模块，并调用其中的 myFunction 函数。

总结

ECMAScript 2020（ES 11）引入了许多新的特性和改进，其中包括面向对象编程的一些新特性。我们可以使用类的私有属性和方法来封装类的实现细节，使用可选链操作符来避免访问不存在的属性或方法时出现错误，以及使用动态导入来在运行时加载模块。这些新特性可以帮助我们编写更加优秀和可维护的 JavaScript 代码。

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