如何在 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 创建的实例 最初有一个count 属性，但Animal 本身没有，直到您调用increaseCount。 this 在static 方法中指的是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 设为私有：

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。

Answer 2

要设置静态变量，请将其设置在对象 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 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

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

Class fields proposal 为 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 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);