ES12 中的 class fields：如何更好地处理对象的状态-JavaScript中文网-JavaScript教程资源分享门户

ES12（也被称为ECMAScript 2021）是JavaScript的最新版本，其中最引人注目的一个特性是Class Fields。Class Fields使创建面向对象的JavaScript程序变得更加简单、优雅和灵活。

在有Class Fields之前，我们需要在类的构造函数中手动为实例属性分配初始值。这种方式存在许多问题，在处理状态、继承和可写性方面也存在局限性。Class Fields旨在解决这些问题。在本文中，我们将深入探讨ES12 Class Fields的特性，并详细讨论如何在前端开发中使用它们。

什么是Class Fields

Class Fields是指类中用于声明属性的语法。在ES6中，为了声明类的属性，我们需要将其声明在类的构造函数中。但是，在ES12中，我们可以直接在类的主体中声明类的属性。这反过来使得处理状态变得更加简单。

class Person {
  name = "zhangsan";
  age = 25;

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old!`);
  }
}

在上面的代码中，我们使用赋值语法来声明Person类的两个属性：name和age。与函数定义一样，这样的赋值语法没有关键字var或let。这实际上是syntactic sugar，与传统的ES5语法中初始化类属性的方式是等效的。

Class Fields的优点

使用Class Fields的好处是什么？下面列出了一些优点：

简洁

使用Class Fields语法编写类的代码更加简洁。执行传统的ES5语法时，我们需要在构造函数中配置实例属性。这会使代码变得更加冗长。

不需要this.constructor

在传统的ES5语法中，我们需要使用this.constructor来访问当前实例。而使用Class Fields的情况下，我们可以将类的属性定义直接放在类中，不需要在构造函数中定义实例属性，这将大大简化代码。

更好的可读性

使用Class Fields使代码更容易阅读和理解。因为我们的代码中可以很明显地看到属性和方法的声明，不需要在他人代码中查找他们。

更好的可维护性

使用Class Fields使代码更容易维护。使用变量和函数来定义实例属性和类属性可以使我们的代码变得容易出错。使用Class Fields，我们可以在一个地方直接进行属性值赋值，并且有利于使代码可读性更高。

Class Fields的局限性

使用Class Fields语法也存在某些局限性：

无法在方法中覆盖类成员

在ES12中，我们无法在类的方法中覆盖Class Field，在这种情况下，类的属性将被覆盖。让我们来看一个例子：

class Person {
  name = "zhangsan";

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

class Student extends Person {
  name = "lisi";

  sayName() {
    console.log(`My name is ${this.name}`);
  }
}

const person = new Person();
person.sayName();  // Output: My name is zhangsan

const student = new Student();
student.sayName();  // Output: My name is lisi

在这个示例中，我们首先在Person类中声明了一个名为name的属性和一个名为sayName()的方法。然后在Student类中，我们继承了Person类并重新声明了name属性和sayName()方法。即使我们在Student类中重新声明了属性，但我们调用student.sayName()时输出的是My name is lisi。这是因为属性值被实例化对象所具有的优先级覆盖了。

不能避免命名冲突

类成员名不能被重写，但您可能会遇到命名冲突。这可能是在继承类中常见的问题。

应用

除了在定义类的实例属性方面更具灵活性以外，Class Fields还可以在以下场景中使用：

类静态成员

Class Fields的语法也适用于类静态成员的声明。这种语法比代码中的其他选项更加简洁和读者友好，让我们看一个例子：

class Student {
  static number = 0;  // 静态成员

  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.id = ++Student.number;
  }
}

const student1 = new Student("zhangsan", 22);
const student2 = new Student("lisi", 23);

console.log(Student.number);  // Output: 2
console.log(student1.number);  // Output: undefined
console.log(student2.number);  // Output: undefined

在这个示例中，我们定义了一个名为number的静态属性。我们可以通过类名访问该属性。由于此属性是静态的，所以我们无法通过实例访问它。

更方便的继承

使用Class Fields可以使继承更加方便。让我们看一个例子：

class Animal {
  constructor(type = "Animal") {
    this.type = type;
  }

  setType(type) {
    this.type = type;
  }
}

class Dog extends Animal {
  breed = "Shih Tzu";

  setBreed(breed) {
    this.breed = breed;
  }

  bark() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog();
console.log(dog.type);  // Output: Animal
dog.setType("Dog");
console.log(dog.type);  // Output: Dog
console.log(dog.breed);  // Output: Shih Tzu
dog.setBreed("Yorkie");
console.log(dog.breed);  // Output: Yorkie
dog.bark();  // Output: Woof! Woof!

在这个示例中，我们定义了动物类Animal和狗类Dog。在动物类中，我们的构造函数接收一个名为type的可选参数。我们在类的主体中定义了setType()方法，用于更改Animal的类型。在狗类中，我们在类的主体中定义了一个名为breed的属性。我们在类的主体中定义了setBreed()方法，用于更改狗类的品种。最后我们定义了bark()方法，使用console.log输出狗的叫声。

在这个示例中，我们了解了如何在Dog类中使用Class Fields。

总结

ES12 Class Fields是一种很好的编写面向对象JavaScript应用程序的方式。使用Class Fields，我们可以更高效地编写代码、操作对象状态。我们可以使用Class Fields来声明类实例和类静态成员。Class Fields还使继承描述更容易，并且可以增加代码的可读性和可维护性。

除了上文中提及到的例子，还有更多使用Class Fields的方式。Class Fields是ES12的新特性，它为我们提供了一种更现代化的JavaScript编程体验。让我们借助这些新的功能去编写更好、更容易维护、更健壮的程序。

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

ES12 中的 class fields：如何更好地处理对象的状态