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

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

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

这是我得到的错误：

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

看来ES6模块不允许这样做。有没有办法得到想要的行为，还是我必须写一个吸气剂？

您使用访问器和“ static”关键字创建“ public static field”：

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

Agent.CIRCLE; // 1

查看规范14.5（类定义），您会发现一些可疑的相关内容：）

ClassElement [Yield]：
  MethodDefinition [？Yield]
  静态MethodDefinition [？Yield];

因此，从那里可以继续执行14.5.14（运行时语义：ClassDefinitionEvaluation），再次检查它是否确实像它看起来的那样。具体来说，步骤20：

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

IsStatic在早期定义14.5.9

ClassElement：static MethodDefinition
返回true。

因此PropertyMethodDefinition以“ F”（构造函数，函数对象）作为参数进行调用，这又在该对象上创建了一个访问器方法。

这已经工作至少IETP（技术预览版），以及6to5和Traceur编译器。

Daniel Ehrenberg和Jeff Morrison提出了名为“静态类功能”的第3阶段ECMAScript提案，旨在解决此问题。连同第3阶段“类字段”提案，未来的代码将如下所示：

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;

Babel 支持通过@ babel / plugin-proposal-class-properties（包含在Stage-3预设中）来转换类字段，因此即使您的JavaScript运行时不支持此功能，您也可以使用它。

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

如果该建议被接受，那么将有可能以与传统的面向对象语言（如Java和C♯）更相似的方式编写JavaScript代码。

编辑：统一的类字段提案现在处于阶段3；更新到Babel v7.x软件包。

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

在当前的ECMAScript 6草案（截至2015年2月）中，所有类属性都必须是方法，而不是值（请注意，在ECMAScript中，“属性”在概念上与OOP字段相似，不同之处在于字段值必须是Function对象，而不是任何对象其他值，例如aNumber或Object）。

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

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

为了充分利用静态变量，我遵循了这种方法。更具体地说，我们可以使用它来使用私有变量，或者仅使用公共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

@kangax的答案不会模仿传统OOP语言的整个静态行为，因为您无法通过静态实例的实例来访问static属性 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