在 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 抱怨第二行代码中的错误：

语法错误：错误的方法定义

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

JavaScript中的静态变量并没有真正帮助我，因为它主要使用旧语法。

Answer 1

静态类字段是第 3 阶段的提案，这意味着它们还不是 JavaScript 语言的正式组成部分。（第4阶段是最后阶段。）你可以阅读更多关于该提案在这里和建议的过程在这里。

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

要使用其他浏览器这个功能，你需要使用巴贝尔与@巴贝尔/插件，建议类的属性来transpile你的代码。但是，如果您还没有使用 Babel，这可能有点过头了。

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

class AddOrSelectAddress {
  // ...
}

AddOrSelectAddress.body = 'some initial value';

您可以在下面的代码段中看到这一点。

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.