如何在 ES6 类中使用静态变量？

Question

我正在尝试在 es6 中使用静态变量。 我想在Animal类中声明一个静态变量count并增加它。 但是，我无法通过static count = 0;声明一个静态变量static count = 0; ，所以我尝试了另一种方式：

 class Animal { constructor() { this.count = 0; } static increaseCount() { this.count += 1; } static getCount() { return this.count; } } console.log(Animal.increaseCount()); // undefined console.log(Animal.getCount()); // NaN

我期望console.log(Animal.getCount()); 为1 ，但它不起作用。 如何声明静态变量并通过调用方法对其进行修改？

Answer 1

您的类没有静态变量（如果静态变量是指静态属性）。 getCount返回NaN （在您调用increaseCount ），因为Animal最初没有count属性。 然后increaseCount做undefined + 1即NaN 。 由new Animal创建的实例最初具有count属性，但Animal本身直到您调用increaseCount 。 static方法中的this指的是Animal类（构造函数）本身（如果您通过Animal.methodName(...)调用它）。

你可以给Animal一个count属性：

Animal.count = 0;

现场示例：

 class Animal { constructor() { } static increaseCount() { this.count += 1; } static getCount() { return this.count; } } Animal.count = 0; Animal.increaseCount(); console.log(Animal.getCount()); Animal.increaseCount(); console.log(Animal.getCount());

使用静态类字段提案（目前处于第 3 阶段），您可以声明性地使用static count = 0; 在Animal 。 实时示例（Stack Snippets 的 Babel 配置似乎支持它） ：

 class Animal { constructor() { } static count = 0; static increaseCount() { this.count += 1; } static getCount() { return this.count; } } Animal.increaseCount(); console.log(Animal.getCount()); Animal.increaseCount(); console.log(Animal.getCount());

使用私有静态提案（在第 3 阶段并正在积极实施），您甚至可以将count私有：

class Animal {
  constructor() {
  }

  static #count = 0;

  static increaseCount() {
    this.#count += 1;
  }

  static getCount() {
    return this.#count;
  }
}

Animal.increaseCount();
console.log(Animal.getCount());
Animal.increaseCount();
console.log(Animal.getCount());

Stack Snippets 的 Babel 配置不支持这一点，但您可以在他们的 REPL 中实时运行它。

---

旁注：如果有子类，在静态方法中使用this来引用类（构造函数）有点棘手，因为例如，如果你有：

class Mammal extends Animal {}

进而

Mammal.increaseCount();

this increaseCount （它继承自Animal ）是指Mammal ，而不是Animal 。

如果您想要这种行为，请使用this 。 如果不这样做，请在这些static方法中使用Animal 。

Answer 2

正如其他答案中提到的， this.count指的是constructor实例属性。 为了初始化静态属性，应该设置Animal.count 。

类字段提案为Animal.count = 0提供了语法糖，可用于转译器（Babel 等）：

class Animal {
  static count = 0;
  ...
}

ES6 中的另一种选择是使用初始值，在这种情况下， Animal.count初始值不需要显式设置，例如：

class Animal {    
  static increaseCount() {
    this.count = this.getCount() + 1;
  }

  static getCount() {
    return this.count || 0;
  }
}

JavaScript 类中不欢迎访问器方法 - 这就是 getter/setter 描述符的用途：

class Animal {    
  static increaseCount() {
    this.count += 1;
  }

  static get count() {
    return this._count || 0;
  }

  static set count(v) {
    this._count = v;
  }
}

仅静态类在 JavaScript 中被视为反模式，因为不使用特定于类的状态或其他特征。 如果应该只有一个实例，应该使用普通对象（除非有其他可以从class受益的问题）：

const animal = {    
  increaseCount() {
    this.count += 1;
  },

  get count() {
    return this._count || 0;
  },

  set count(v) {
    this._count = v;
  }
};

Answer 3

静态类端属性和原型数据属性必须在 ClassBody 声明之外定义。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

 class Animal { static increaseCount() { Animal.count += 1; } static getCount() { return Animal.count; } } Animal.count = 0; Animal.increaseCount(); console.log(Animal.getCount()); // undefined

Answer 4

要设置静态变量，请将其设置在对象 Animal 本身上。 截至目前，在 Javascript 中，您不能像声明静态方法那样直接在类中声明静态属性。

class Animal {
    constructor() {
    }

    static increaseCount() {
        this.count += 1;
    }

    static getCount() {
        return this.count;
    }
}
Animal.count = 0;
console.log(Animal.increaseCount());
console.log(Animal.getCount()); 

Answer 5

您可以使用闭包来模拟静态变量

 const Animal= (() => { let count= 0; class Animal { constructor() {} static increaseCount() { count += 1; } static getCount() { return count; } } return Animal; })(); console.log(Animal.getCount()); Animal.increaseCount(); console.log(Animal.getCount());

Answer 6

如果您想拥有增量 ID：

 constructor() {
    super(template);
    if (typeof MyClass.nextId == 'undefined') {
    MyClass.nextId = 0;
    }
    this._id = `${MyClass.nextId++}`;
 }

Answer 7

您可以使用静态 getter 和 setter 模拟静态变量

 export class MyClass {
  static get variable() {
    return this.foo;
  }

  static set variable(foo) {
    this.foo = foo;
  }
}

并像这样使用它

  MyClass.variable = 'bar';
  console.log(MyClass.variable);