如何在 ES6 类中创建“公共静态字段”？

Question

我正在制作一个 Javascript 类，我想要一个像 Java 一样的公共静态字段。这是相关代码：

export default class Agent {
    CIRCLE: 1,
    SQUARE: 2,
    ...

这是我得到的错误：

line 2, col 11, Class properties must be methods. Expected '(' but instead saw ':'.

看起来 ES6 模块不允许这样做。有没有办法获得所需的行为，还是我必须编写一个 getter？

Answer 1

您使用访问器和“静态”关键字创建“公共静态字段”：

class Agent {
    static get CIRCLE() {
      return 1;
    }
    static get SQUARE() {
      return 2;
    }
}

Agent.CIRCLE; // 1

查看规范，14.5 — 类定义 — 你会看到一些可疑的相关内容 :)

类元素[产量]：
MethodDefinition[?Yield]
静态 MethodDefinition[?Yield] ;

因此，您可以从那里关注14.5.14 — 运行时语义：ClassDefinitionEvaluation — 仔细检查它是否真的像看起来那样做。具体来说，第 20 步：

1. 对于每个 ClassElement m 按方法顺序排列
   1. 如果 IsStatic of m 为假，则
      1. 让 status 为使用参数 proto 和 false 对 m 执行 PropertyDefinitionEvaluation 的结果。
   2. 否则，
      1. 设 status 为对 m 执行 PropertyDefinitionEvaluation 的结果，参数为 F 和 false。
   3. 如果状态是突然完成，则
      1. 将正在运行的执行上下文的 LexicalEnvironment 设置为 lex。
      2. 返回状态。

IsStatic 在前面的 14.5.9 中定义

类元素：静态方法定义
返回真。

所以PropertyMethodDefinition 是用“F”（构造函数，函数对象）作为参数调用的，而它又是creates an accessor method on that object。

这个already works 至少在 IETP（技术预览）以及 6to5 和 Traceur 编译器中。

Answer 2

从 ECMAScript 2022 开始，您可以执行类似的操作，类似于 Java 和 C# 等传统的面向类的语言：

class MyClass {
    static myStaticProp = 42;
    myProp = 42;
    myProp2 = this.myProp;
    myBoundFunc = () => { console.log(this.myProp); };

    constructor() {
        console.log(MyClass.myStaticProp); // Prints '42'
        console.log(this.myProp); // Prints '42'
        this.myBoundFunc(); // Prints '42'
    }
}

以上等价于：

class MyClass {
    constructor() {
        this.myProp = 42;
        this.myProp2 = this.myProp;
        this.myBoundFunc = () => { console.log(this.myProp); };

        console.log(MyClass.myStaticProp); // Prints '42'
        console.log(this.myProp); // Prints '42'
        this.myBoundFunc(); // Prints '42'
    }
}
MyClass.myStaticProp = 42;

这些功能是在 Daniel Ehrenberg 等人的 "Static Class Features" 和 "Class Fields" 提案中添加的。 Google Chrome（和新 Edge）开始支持 version 72 中的这两个提案，相当于 Node.js 12+。 Firefox 从version 69 开始支持公共实例字段，从version 75 开始支持静态实例字段。自version 14.1 以来，Safari 都支持。在caniuse.com 上查看更多信息。

对于尚不支持这些功能的旧版浏览器，您可以使用Babel 到transpile 类字段。这需要启用@babel/plugin-proposal-class-properties（默认在@babel/plugin-env 中从v7.14.0 开始启用）。

---

与@kangax 声明getter 的解决方案相比，该解决方案还可以更高效，因为这里的属性是直接访问的，而不是通过调用函数。

---

编辑：统一类字段提案现在处于第 3 阶段。

编辑（2020 年 2 月）：静态类功能已拆分为不同的提案。谢谢@GOTO0！

编辑（2021 年 3 月）：除了 Safari，2020 年 4 月之后发布的所有主要浏览器现在都支持此功能！

编辑（2021 年 6 月）：这两个提案都被 ECMAScript 语言委员会 TC39 接受，Safari 在 14.1 版中提供了此功能！

Answer 3

在当前的 ECMAScript 6 草案中（截至 2015 年 2 月），所有类属性都必须是方法，而不是值（注意在 ECMAScript 中，“属性”在概念上类似于 OOP 字段，除了字段值必须是 @ 987654321@ 对象，而不是任何其他值，例如 Number 或 Object)。

您仍然可以使用传统的 ECMAScript 构造函数属性说明符指定这些：

 class Agent {
 }
 Agent.CIRCLE = 1;
 Agent.SQUARE = 2;
 ...

Answer 4

为了充分利用静态变量，我采用了这种方法。更具体地说，我们可以使用它来使用私有变量或只有公共 getter，或者同时拥有 getter 或 setter。在最后一种情况下，它与上面发布的解决方案之一相同。

var Url = (() => {
    let _staticMember = [];
    return class {
        static getQueries(hash = document.location.hash) {
            return hash;
        }

        static get staticMember(){
            return _staticMember;
        }
    };
})();

Usages:
console.log(Url.staticMember); // [];
Url.staticMember.push('it works');
console.log(Url.staticMember); // ['it works'];

我可以创建另一个扩展 Url 的类，它可以工作。

我使用 babel 将我的 ES6 代码转换为 ES5

Answer 5

@kangax 的答案并没有模仿传统 OOP 语言的整个静态行为，因为您无法通过它的实例访问静态属性，例如 const agent = new Agent; agent.CIRCLE; // Undefined

如果您想像 OOP 一样访问静态属性，这是我的解决方案：

class NewApp {
  get MULTIPLE_VERSIONS_SUPPORTED() {
    return this.constructor.MULTIPLE_VERSIONS_SUPPORTED; // Late binding for inheritance
  }
}

NewApp.MULTIPLE_VERSIONS_SUPPORTED = true;

测试代码如下。

class NewApp {
  get MULTIPLE_VERSIONS_SUPPORTED() {
    console.log('this.constructor.name:', this.constructor.name); // late binding
    return this.constructor.MULTIPLE_VERSIONS_SUPPORTED;
  }
}

// Static property can be accessed by class
NewApp.MULTIPLE_VERSIONS_SUPPORTED = true;

const newApp = new NewApp;

// Static property can be accessed by it's instances
console.log('newApp.MULTIPLE_VERSIONS_SUPPORTED:', newApp.MULTIPLE_VERSIONS_SUPPORTED); // true

// Inheritance
class StandardApp extends NewApp {}

// Static property can be inherited
console.log('StandardApp.MULTIPLE_VERSIONS_SUPPORTED:', StandardApp.MULTIPLE_VERSIONS_SUPPORTED); // true

// Static property can be overwritten
StandardApp.MULTIPLE_VERSIONS_SUPPORTED = false;

const std = new StandardApp;

console.log('std.MULTIPLE_VERSIONS_SUPPORTED:', std.MULTIPLE_VERSIONS_SUPPORTED); // false