什么是“类字段"?在JavaScript中? [英] What are "class fields" in JavaScript?

问题描述

我正在阅读有关JavaScript类的内容，偶然发现了这个术语"公共类字段语法".在深入研究它时，我遇到了 Babel关于类属性的文档.

I was reading about JavaScript classes, and came across this term "public class fields syntax". On digging a bit deeper into it I came across this Babel's documentation on class properties.

有人可以解释一下-在实现方面，这种新语法的用例是什么? (到目前为止，它为JavaScript提供了哪些解决方案/优点?)

Can someone please explain - implementation-wise what are the use-cases for this new syntax? (What solutions/benefits does it offer to JavaScript, which were missing so far?)

下面是(在Google Chrome浏览器中没有错误)下面的示例:

class Person {
    firstName = "Mike";
    lastName = "Patel";
    
    // this is a public class field syntax
    getName = () => {
      return this.firstName + " " + this.lastName;
    };
}

var p = new Person();

console.log(p.firstName); // Mike
console.log(p.lastName); // Patel
console.log(p.getName); // () => { return this.firstName + " " + this.lastName; }
console.log(typeof p.getName); // function
console.log(p.getName()); // Mike Patel

推荐答案

简而言之，使用此代码的原因是易于理解代码.没有类字段声明，您将执行

Simply put, the reason to use this is ease of understanding the code. Without class field declarations, you'd do something like

class Person {
  constructor() {
    this.firstName = "Mike";
    this.lastName = "Patel";

    this.getName = () => {
      return this.firstName + " " + this.lastName;
    };
  }
}

var p = new Person();

console.log(p.firstName); // Mike
console.log(p.lastName); // Patel
console.log(p.getName); // () => { return this.firstName + " " + this.lastName; }
console.log(typeof p.getName); // function
console.log(p.getName()); // Mike Patel

这可行，但是现在您同时具有方法声明和 instance属性都收集在构造函数中.但是，您可以有更多的方法，这意味着您的类定义总体上看起来毫无意义:

This works but now you have both the method declaration and the instance properties all collected in the constructor. You could have even more methods, however, which means that your class definition would look rather meaningless overall:

class MyClass() {
  constructor(someArg) {
    this.prop1 = 1;
    this.prop2 = 2;
    this.prop3 = 3;
    this.prop4 = someArg;

    this.method1 = () => {}
    this.method2 = () => {}
    this.method3 = () => {}
    this.method4 = () => {}
  }
}

，依此类推.同样，一切都在构造函数中.如果您有很多代码，那么很难读懂什么是什么.而且，如果构造函数接受任何参数，那么您就有额外的开销来跟踪这些参数.简而言之，它很难阅读，很难维护，没有真正的好处.您将所有东西都塞在同一个地方.

and so on. Again, everything is in the constructor. If you have a lot of code, it becomes harder to read what is what. And if the constructor takes any arguments, then you have the extra overhead of keeping track of those. Simply put, it's hard to read, hard to maintain for no real benefit. You are stuffing everything in the same place.

使用类字段声明，您将它们分开并得到

With class field declarations, you separate them and you get

class MyClass() {
  /* properties - don't depend on the constructor*/
  prop1 = 1;
  prop2 = 2;
  prop3 = 3;
  prop4; /* this is a property that this class will have - 
          I don't need to look at the constructor to know about it */

  /* easy to see what the constructor does that is only about *constructing* the object */
  constructor(someArg) {
    this.prop4 = someArg;
  }

  /* methods are separated from the rest of the properties and construction logic */
  method1 = () => {}
  method2 = () => {}
  method3 = () => {}
  method4 = () => {}
}

总而言之，它不是革命性的，但是它的语法稍微好一点，可以更轻松地表达类的内容.

So, all in all, it's not revolutionary but it is slightly nicer syntax that makes it easier to express what a class has.

这篇关于什么是“类字段"?在JavaScript中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！