Js es6 class constructor function run before the constructor instantiate

Question

I have an es6 class the instantiate a variable from a function call, but the problem is it seems that the function is running before the constructor instantiated and throw an error:

  constructor() {
    this.userSelections = {
      types    : this.getTypes(),
      providers: this.getProvider()
    } 
  }

 getProvider() {
    // here its throw error that this.userSelections is undefined
    var activeType = this.userSelections.types.some(( type ) => {
      return type.active;
    });

  }

Whats is the problem and how i can handle this situation?

Felix Kling · Accepted Answer · 2015-07-13T09:18:47.660

7

The problem has nothing to do with classes, ES6 or Babel. Here is a simplified version of your problem:

var foo = {
  bar: 42,
  baz: foo.bar * 2
};

This will throw an error because foo is not initialized yet at the moment foo.bar is accessed.

In your case, you are calling getProvider during the creation of the object you want to assign to this.userSelections. this.userSelections or its value does not exist yet, it is still being constructed.

You could initialize the value in two steps:

this.userSelections = {
  types: this.getTypes()
};
// now that `this.userSelections` exists, we can call `this.getProvider` without problems
this.userSelections.providers = this.getProvider();

or refactor your code so that getProviders accepts types as parameter, maybe something like:

class Foo {
  constructor() {
    let types = this.getTypes();
    this.userSelection = {
      types,
      providers: this._getProvider(types)
    };
  }

  _getProvider(types) {
    var activeType = types.some(( type ) => {
      return type.active;
    });
    // ...
  }

  getProvider() {
    return this._getProvider(this.userSelection.types);
  }
}

edited Jul 13 '15 at 09:18

answered Jul 13 '15 at 09:09

Felix Kling

795,719
175
1,089
1,143

His `this` references the `userSelections` object. He is invoking `getProviders` on the `userSelections` object. – Dan Jul 13 '15 at 09:10
2

@DanPantry: No it does not. That's not how object literals work. – Felix Kling Jul 13 '15 at 09:11
My mistake. I don't know why but I forgot constructor creates an execution context. – Dan Jul 13 '15 at 09:12
But why this line is working this.userSelections.providers = this.getProviders();? – user233232 Jul 13 '15 at 09:15
@user233232: Because now when `this.getProvider` is called, `this.userSelection` already exists. We created it in the previous statement: `this.userSelections = {types: this.getTypes()};` – Felix Kling Jul 13 '15 at 09:16
Thanks a lot for this answer. – user233232 Jul 13 '15 at 09:18

Js es6 class constructor function run before the constructor instantiate

1 Answers1