ES12：更好的封装对象定义

在前端开发中，对象是一个非常重要的概念。ES6 为我们带来了类(class)的概念，方便我们定义对象。不过，ES12 更进一步，带来了更好的封装对象定义。

对象的现状

在 ES6 前，我们定义对象的方式是通过构造函数(constructor)和原型(prototype)。例如：

function Person(name) {
  this.name = name;
}

Person.prototype.grind = function() {
  console.log(this.name + ' is grinding.');
}

var person1 = new Person('Lucy');
person1.grind(); // "Lucy is grinding."

这种方式存在一些问题：

1. 构造函数和原型定义在不同的地方，容易混淆。
2. 如果有私有属性或方法的需求，就需要使用闭包或 ES5 的 defineProperty，增加了复杂度。

在 ES6 中，我们可以使用类来定义对象。例如：

class Person {
  constructor(name) {
    this.name = name;
  }
  grind() {
    console.log(this.name + ' is grinding.');
  }
}

let person1 = new Person('Lucy');
person1.grind(); // "Lucy is grinding."

这种方式更加简单易懂，但仍存在一些问题：

1. 类是一种语法糖，通过编译之后还是会变成构造函数和原型的形式，因此问题并没有彻底解决。
2. 私有属性或方法仍然需要通过闭包或者 defineProperty 来实现。

这时，我们就需要 ES12 的帮助了。

使用 # 定义私有属性和方法

在 ES12 中，我们可以使用 # 来定义私有属性和方法。例如：

class Person {
  #health = 100; // 私有属性
  #grind() { // 私有方法
    console.log(this.name + ' is grinding.');
  }
  constructor(name) {
    this.name = name;
  }
  eat() {
    this.#health += 10;
    console.log(this.name + ' is eating.');
  }
}

let person1 = new Person('Lucy');
person1.eat(); // "Lucy is eating."
console.log(person1.#health); // 报错
person1.#grind(); // 报错

使用 # 定义的属性和方法，只能在类内部访问，并且不能在外部访问。这就解决了私有属性和方法的问题。

使用 static 和 constructor 实现工厂方法

在前面的示例中，我们是通过实例化类来创建对象的。但有时我们希望能够直接创建对象或者使用工厂方法来创建对象。ES12 为我们提供了 static 关键字和 constructor 方法来实现这一点。

class Person {
  #health = 100;
  #grind() {
    console.log(this.name + ' is grinding.');
  }
  constructor(name) {
    this.name = name;
  }
  eat() {
    this.#health += 10;
    console.log(this.name + ' is eating.');
  }
  static create(name) {
    return new Person(name);
  }
}

let person1 = new Person('Lucy');
let person2 = Person.create('John');

使用 static 关键字定义的方法，可以直接通过类名来访问，无需实例化类。使用 constructor 方法，可以在类实例化时执行一些操作，例如初始化一些属性。

总结

ES12 为我们带来了更好的封装对象定义的方式，解决了原来定义对象时存在的问题，并且让代码更加简洁易懂。我们可以使用 # 定义私有属性和方法，使用 static 和 constructor 实现工厂方法。这些新特性可以帮助我们写出更好的代码，提高生产力和代码质量。

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