Question

我正在尝试在es6中使用静态变量。我想在count类中声明一个静态变量Animal并增加它。但是，我无法通过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的{{1}}。由NaN创建的实例最初具有new Animal属性，但是count本身直到您调用Animal时才具有。 increaseCount方法中的this引用static类（构造函数）本身（如果您通过Animal进行调用）。

您可以为Animal.methodName(...)提供Animal属性：

count

实时示例：

Animal.count = 0;

使用static class fields proposal（当前在第3阶段），您可以使用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 count = 0;进行声明式操作。实时示例（Stack Snippets的Babel配置似乎支持它）：

Animal

旁注：如果有子类，则在静态方法中使用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());来引用类（构造函数）会有些棘手，例如，如果您有：

this

然后

class Mammal extends Animal {}

Mammal.increaseCount();

中的

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

如果您想要该行为，请使用Animal。如果不这样做，请在那些this方法中使用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

如其他答案中所述，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 4

静态类侧属性和原型数据属性必须在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 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++}`;
 }

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

6 个答案: