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

Question

我正在尝试在 es6 中使用静态变量。我想在 Animal 类中声明一个静态变量 count 并增加它。但是，我无法通过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 创建的 Instances 最初有一个 count 属性，但 Animal 本身没有，直到你调用 增加计数。 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());

随着static class fields proposal (目前处于第 3 阶段)，您可以在 Animal 中使用 static count = 0; 以声明方式执行此操作。 Live Example (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());

随着private static提案(在第 3 阶段并正在积极实现)，您甚至可以将 count 设为私有(private):

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 配置不支持，但您可以在 their REPL 中实时运行它.

---

旁注:如果有子类，在静态方法中使用 this 来引用类(构造函数)会有点棘手，因为例如，如果您有:

class Mammal extends Animal {}

然后

Mammal.increaseCount();

increaseCount 中的

this(它继承自 Animal)指的是 Mammal，而不是 Animal 。

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