ES6 Classes - Updating Static Properties

user_4859818 0
Viewed 8708

I am trying to figure out alternative ways to set a static (or class) property an ES6 Class and then change it after new instances of the class are created.

For example, lets say I have a class called Geo, and I need a static property called all that will give me the array of all instances of the Geo class.

This version works:

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

I would prefer to not set the property OUTSIDE of the class definition though. I've tried a few things but can't seem to create a static property within the class that I can update from the constructor.

I should also mention I need to be able to do this in the browser (Chrome) without use of Babel or similar.

Here are examples of some things I've tried:

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

And another 

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 "="
ecmascript-6 object class oop javascript
5 Answers

This works for me for static properties. 

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

  }

And your example: 

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

Note: In the getter you could also check for the existence of the property using the in keyword or the hasOwnProperty keyword.

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

      return NeoGeo._topScore;
    }

And using hasOwnProperty: 

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

      return NeoGeo._topScore;
    }
user_4410160

I recently had a similar issue of creating static classes.

I first tried it with constant class variables, but Chrome debugger threw an error. So I defined the class variables 'static', also the getter methods.

Worked in 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;
  }
}

user_116035100

The only way to properly add a getter is to extend the class and use that extended class.

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

}

user_45989920

Update your node to the version 12 or up and that's it ;)

user_59483570
Related