如何在ES6类中使用静态变量？ [英] How do I use a static variable in ES6 class?

问题描述

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

< pre class = snippet-code-js lang-js prettyprint-override> class Animal {Constructor（）{this.count = 0; }静态增加计数（）{this.count + = 1; }静态getCount（）{返回this.count; }} console.log（Animal.increaseCount（））; // undefinedconsole.log（Animal.getCount（））; // NaN

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

解决方案

您的类没有静态变量（如果使用静态变量，则表示静态属性）。 getCount 返回 NaN （在您调用 increaseCount 之后），因为动物最初没有 count 个属性。然后 increaseCount 进行 undefined + 1 ，即 NaN 。由 new Animal 创建的实例最初具有 count 属性，但动物本身不会调用您的 increaseCount 。 静态方法中的 this 指的是 Animal 类（构造函数）本身（如果通过 Animal.methodName（...）调用它）。

您可以给 Animal 一个 count 属性：

  Animal.count = 0; 
  

实时示例：

  class Animal {构造函数（）{}静态增加计数（）{this.count + = 1; }静态getCount（）{返回this.count; }} Animal.count = 0; Animal.increaseCount（）; console.log（Animal.getCount（））; Animal.increaseCount（）; console.log（Animal.getCount（））;  

使用静态类字段提案（当前在Stage 3），您可以声明性地使用 static count = 0; 在动物中。实时示例（堆栈片段的Babel配置似乎支持它）

：

 类Animal {构造函数（）{}静态计数= 0;静态增加计数（）{this.count + = 1; }静态getCount（）{返回this.count; }} Animal.increaseCount（）; console.log（Animal.getCount（））; Animal.increaseCount（）; console.log（Animal.getCount（））;  

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

  class Animal {
 Constructor（）{
} 
 
 static #count = 0; 
 
 static gainCount（）{
 this。＃count + = 1; 
} 
 
 static getCount（）{
返回此值。 
} 
} 
 
 Animal.increaseCount（）; 
 console.log（Animal.getCount（））; 
 Animal.increaseCount（）; 
 console.log（Animal.getCount（））; 
  

Stack Snippets的Babel配置不支持该功能，但是您可以在其REPL 。

---

侧面注释：使用 this在存在子类的静态方法中，引用类（构造函数）会有些棘手，因为例如广告：

 类哺乳动物扩展动物{} 
  

，然后

  Mammal.increaseCount（）; 
  

this gainCount （继承自动物）是指哺乳动物，而不是动物。

如果您想要该行为，请使用此。如果不这样做，请在这些静态静态方法中使用 Animal 。

I'm trying to use a static variable in es6. I'd like to declare a static variable count in Animal class and increase it. However, I couldn't declare a static variable through static count = 0;, so I tried another way like this:

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

I expected console.log(Animal.getCount()); to be 1, but it doesn't work. How do I declare a static variable and modify it by calling a method?

解决方案

Your class has no static variables (if by static variable you mean static property). getCount returns NaN (after you call increaseCount) because Animal has no count property initially. Then increaseCount does undefined + 1 which is NaN. Instances created by new Animal have a count property initially, but Animal itself does not until you call increaseCount. this within a static method refers to the Animal class (constructor function) itself (if you call it via Animal.methodName(...)).

You could give Animal a count property:

Animal.count = 0;

Live Example:

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());

With the static class fields proposal (currently at Stage 3), you could do that declaratively with static count = 0; in Animal. Live Example (Stack Snippets' Babel configuration seems to support it):

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());

With the private static proposal (at Stage 3 and actively being implemented), you could even make 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 config doesn't support that, but you can run it live in their REPL.

---

Side note: Using this within a static method to refer to the class (constructor function) is a bit tricky if there are subclasses, because for instance, if you had:

class Mammal extends Animal {}

and then

Mammal.increaseCount();

this within increaseCount (which it inherits from Animal) refers to Mammal, not Animal.

If you want that behavior, use this. If you don't, use Animal in those static methods.

这篇关于如何在ES6类中使用静态变量？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！