在 JavaScript 类中正确声明静态变量

Question

在我的代码中，我执行以下操作（非常简化）：

class AddOrSelectAddress {
    static body; // <-- Error

    static async open() {
        await $.get(basePath + 'Manage/AddOrSelectAddress', null, result => {
            this.body = document.createElement('div');
            this.body.innerHTML = result;
        });
        // ...
    }

    static someOtherMethod() {
        // do something with body
    }
}

我的代码在 Chrome 中运行良好。但是，Firefox 在第二行代码中抱怨错误：

SyntaxError: 错误的方法定义

我对基于类的 JavaScript 编程比较陌生。我在这里做错了什么？

Static variables in JavaScript 并没有真正帮助我，因为它主要使用旧语法。

Answer 1

Static class fields 是第 3 阶段的提案，这意味着它们还不是 JavaScript 语言的正式部分。 （第 4 阶段是最后阶段。）您可以阅读更多关于提案 here 和提案流程 here 的信息。

目前，Chrome（从 72 版开始）是唯一具有 supports 静态类字段的浏览器。

要在其他浏览器中使用此功能，您需要使用 Babel 和 @babel/plugin-proposal-class-properties 来转译您的代码。但是，如果您还没有使用 Babel，这可能有点过头了。

或者，您可以在初始化后将属性分配给类。这在语义上并不相同，但适用于您（实际上是大多数）用例。

class AddOrSelectAddress {
  // ...
}

AddOrSelectAddress.body = 'some initial value';

你可以在下面的 sn-p 中看到这个工作。

class AddOrSelectAddress {
  static changeBody(val) {
    this.body = val;
  }

  static someMethod() {
    console.log('in someMethod body is', this.body);
  }

  static someOtherMethod() {
    console.log('in someOtherMethod body is', this.body);
  }
}
AddOrSelectAddress.body = 'some initial value';

AddOrSelectAddress.someMethod();
AddOrSelectAddress.changeBody('some other value');
AddOrSelectAddress.someOtherMethod();

如果您不想为body 设置初始值，那么您可以省略该行（因为访问对象的不存在属性会返回undefined），或者您可以将其显式设置为undefined .

Answer 2

静态方法非常好用。然而，静态属性是最近添加的，尚不能在所有浏览器中使用。它可以在 Chrome 中使用，但就像你说的在 Firefox 中没有。请看一下这篇文章，因为它支持我的回答：https://javascript.info/static-properties-methods。要解决您的问题，您可以在静态方法中声明变量。