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)?

You cannot. It's not defined until the closing `}` on the last line — zerkms, Dec 11 '15 at 09:32
That's not ES6. That's some weird experimental (ES7-proposed) property intialisers. — Bergi, Dec 11 '15 at 09:42
sounds like either a duplicate of [es6 call static methods](http://stackoverflow.com/q/28627908/1048572)/[Call static method within a class](http://stackoverflow.com/q/31116300/1048572) or [Self-references in object literal declarations](http://stackoverflow.com/q/4616202/1048572) — Bergi, Dec 11 '15 at 09:44
@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. — Bergi, Dec 11 '15 at 09:58

Dominic · Accepted Answer · 2020-04-27T12:08:47.077

12

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.

edited Apr 27 '20 at 12:08

answered Dec 11 '15 at 10:02

Dominic

62,658
20
139
163

1

Is there something like `self.Color.mainDark` so that one can omit repeating the name of the class? – tonix Apr 27 '20 at 08:52
@Ionix I don't think so – Dominic Apr 27 '20 at 12:09

score 1 · Answer 2 · answered May 27 '23 at 07:49

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

score 0 · Answer 3 · edited May 23 '17 at 11:54

'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

JS & ES6: Access static fields from within class

3 Answers3

Linked

Related