ES6类 - 更新静态属性

时间:2017-05-20 21:55:33

标签: javascript class oop object ecmascript-6

我试图找出将静态(或类)属性设置为ES6类的替代方法,然后在创建类的新实例后更改它。

例如,假设我有一个名为Geo的类,我需要一个名为all的静态属性,它将为我提供Geo类的所有实例的数组。

此版本有效:

class Geo {
  constructor(name){
    this.name = name;
    Geo.all.push(this);
  }
}

Geo.all = [];

ruby = new Geo("Ruby");
rocks = new Geo("Rocks");
console.log(Geo.all.length); // => 2

我宁愿不设置类定义的属性OUTSIDE。我尝试过一些东西,但似乎无法在类中创建一个静态属性,我可以从构造函数中更新。

我还应该提一下,我需要能够在浏览器(Chrome)中执行此操作而不使用Babel或类似功能。

以下是我尝试过的一些事情的例子:

class Geo {
  constructor(name){
    this.name = name;
    Geo.all.push(this);
  }
  static get all() {
    return [];
  }
}

ruby = new Geo("Ruby");
rocks = new Geo("Rocks");
console.log(Geo.all.length); // => 0 

另一个

class Geo {
  constructor(name){
    this.name = name;
    Geo.all.push(this);
  }

  static all = [];
}

ruby = new Geo("Ruby");
rocks = new Geo("Rocks");
console.log(Geo.all.length); // => error unexpected "="

4 个答案:

答案 0 :(得分:15)

ES6 中没有static all = []这样的内容。类instancestatic字段目前是第3阶段提案,可以通过转换器使用,例如巴贝尔。 TypeScript中已经存在可能以某种方式与这些提案不兼容的实现,但static all = [] TS ES.Next 中有效。

Geo.all = [];

是在ES6中执行此操作的有效且可取的方法。替代方案是getter / setter对 - 或者只是get-only属性的getter:

class Geo {
  static get all() {
    if (!this._all)
      this._all = [];

    return this._all;
  }

  constructor() { ... }
}

跟踪静态属性中的实例通常不能被认为是一种好的模式,并且会导致无法控制的内存消耗和泄漏(正如评论中提到的那样)。

答案 1 :(得分:2)

这对我来说适用于静态属性。

  class NeoGeo {

    constructor() {

    }

    static get topScore () {
      if (NeoGeo._topScore===undefined) {
        NeoGeo._topScore = 0; // set default here
      }

      return NeoGeo._topScore;
    }

    static set topScore (value) {
      NeoGeo._topScore = value;
    }

  }

您的示例:

  class NeoGeo {

    constructor() {
      NeoGeo.addInstance(this);
      console.log("instance count:" + NeoGeo.all.length);
    }

    static get all () {

      if (NeoGeo._all===undefined) {
        NeoGeo._all = [];
      }

      return NeoGeo._all;
    }

    static set all (value) {
      NeoGeo._all = value;
    }

    static addInstance(instance) {
      // add only if not already added
      if (NeoGeo.all.indexOf(instance)==-1) {
        NeoGeo.all.push(instance);
      }
    }
  }

注意:在吸气剂中,您还可以使用in关键字或hasOwnProperty关键字检查属性是否存在。

    static get topScore () {
      if (!("_topScore" in NeoGeo)) {
        NeoGeo._topScore = 0; // set default here
      }

      return NeoGeo._topScore;
    }

并使用hasOwnProperty

    static get topScore () {
      if (NeoGeo.hasOwnProperty("_topScore")==false) {
        NeoGeo._topScore = 0; // set default here
      }

      return NeoGeo._topScore;
    }

答案 2 :(得分:0)

我最近遇到了类似的创建静态类的问题。

我首先使用常量类变量进行了尝试,但是Chrome调试器抛出了一个错误。 因此,我定义了类变量“ static”,还定义了getter方法。

在Chrome中工作。

class TestClass {
  //static properties.
  static _prop1 = [ 'A', 'B', 'C'];
  static _prop2 = true;
  static _prop3 = 'some String';
  
  //constructor. Commented out because the class only has static elements.
  //constructor () {}
  
  //Getters.
  static get prop1 () {
    return this._prop1;
  }
  
  static get prop2 () {
    return this._prop2;
  }
  
  static get prop3 () {
    return this._prop3;
  }
}

答案 3 :(得分:0)

正确添加 getter 的唯一方法是扩展类并使用该扩展类。

class Basic {
  get firstGetter() {
    return 'firstGetter'
  }
}
class ExtendedClass extends Basic {
  get firstGetter() {
    return 'updatedFirstGetter'
  }
}

}