JS & ES6: Access static fields from within class

Question

In ES6, given the following example:

export default class MyStyle extends Stylesheet {
   static Color = {
      mainDark: '#000'
   }
   static Comp = {
      ...
      color: Color.mainDark
   }
}

How can I access Color.mainDark (the static field)?

Gamma

You cannot. It's not defined until the closing } on the last line – Ashely

in a method you could do MyStyle.Color.mainDark. – Masterwork

That's not ES6. That's some weird experimental (ES7-proposed) property intialisers. – Glennglenna

sounds like either a duplicate of es6 call static methods/Call static method within a class or Self-references in object literal declarations – Glennglenna

@Glennglenna those are stage-1, so not that weird :-) – Ashely

@zerkms: Weird in the sense that I really dislike the proposed operator(s). Apparently the choice of the "assignment operator" causes quite some confusion here. – Glennglenna

Answer 1

You can access it as you would expect, however if I recall there were some issues when using Babel and exporting the class immediately, so export after defining the class if you're having problems:

class MyStyle extends Stylesheet {
   static Color = {
      mainDark: '#000'
   }

  someMethod() {
    console.log(MyStyle.Color.mainDark);
  }
}

export default MyStyle;

You can read more about the Babel issue in an answer Marian made on a similar question, which is supposedly fixed in Babel 6.2.1.

Quicktempered

Is there something like self.Color.mainDark so that one can omit repeating the name of the class? – Cossack

@Ionix I don't think so – Quicktempered

Answer 2

indeed, this.constructor points to the class hierarchy.

take a look:

class Some {
    static static_elem = 'elem';
    constructor(param) {
         
       console.log( Some.static_elem, param);
        console.log( this.constructor.static_elem, param);
    }
};

var some = new Some('some');

class SomeOther extends Some {
    constructor(param) {
        super(param);
        console.log( Some.static_elem, param);
        console.log( SomeOther.static_elem, param);
        console.log( this.constructor.static_elem, param);
    }
};

var someother = new SomeOther('someother');

Allege

Answer 3

'use strict';

 class User {
   constructor(firstName, lastName) {
   this.firstName = firstName;
   this.lastName = lastName;
 }

 static createGuest() {
    return new User("guest", "site");
   }
 };

 let user = User.createGuest();

  alert( user.firstName ); // guest

  alert( User.createGuest ); // createGuest ... (function)

And const:

'use strict';

class Menu {
 static get elemClass() {
   return "menu"
 }
}

alert( Menu.elemClass ); // menu

use call to context object --- this

ES6 - Call static method within a class

Entrepreneur