web-dev-qa-db-ja.com

ES6クラス-静的プロパティの更新

静的（またはクラス）プロパティを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プロパティを設定しない方がよいでしょう。私はいくつかのことを試しましたが、コンストラクターから更新できるクラス内に静的プロパティを作成できないようです。

また、Babelなどを使用せずにブラウザー（Chrome）でこれを実行できるようにする必要があることにも触れておきます。

これが私が試したいくつかの例です：

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 "="
javascriptclassoopobjectecmascript-6
15
Jared

ES6にはstatic all = []などはありません。クラス instance および static フィールドは現在、トランスパイラーを介して使用できるステージ3の提案です。バベル。何らかの形でこれらの提案と互換性がない可能性のあるTypeScriptの実装はすでに存在していますが、static all = []は[〜＃〜] ts [〜＃〜]およびES.Next。

Geo.all = [];

eS6でこれを行うには有効かつ望ましい方法です。代替はゲッター/セッターのペア、または読み取り専用プロパティのゲッターのみです。

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

    return this._all;
  }

  constructor() { ... }
}

静的プロパティでインスタンスを追跡することは、一般的には適切なパターンとは見なせず、制御不能なメモリ消費とリークにつながります（コメントで言及されているように）。

18
Estus Flask

これは静的プロパティに対して私にとってはうまくいきます。

  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
1.21 gigawatts

私は最近、静的クラスの作成に関して同様の問題を抱えていました。

最初は定数クラス変数で試してみましたが、Chromeデバッガーがエラーをスローしました。そのため、クラス変数 'static'とゲッターメソッドも定義しました。

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;
  }
}
0
user11603510