JavaScript ES6类构造函数在实例化之前运行。

Question

我有一个ES6类，从一个函数调用实例化变量，但问题是似乎该函数在构造函数实例化之前运行并抛出错误：

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

  }

什么是问题，我该如何处理这种情况？

- user233232

Answer 1

这个问题与类、ES6或Babel无关。这是您问题的简化版本:

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

这将会抛出一个错误，因为在访问 foo.bar 的时候，foo 还没有被初始化。

在您的情况下，在创建要分配给 this.userSelections 的对象期间调用了 getProvider。此时，this.userSelections 或其值还不存在，它仍在构建中。

您可以分两步初始化该值：

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

或者重构您的代码，使getProviders接受types作为参数，可能是以下内容：

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

- Felix Kling

---

他的 this 引用了 userSelections 对象。他正在调用 userSelections 对象上的 getProviders 方法。 - Dan

@DanPantry：不，它不会。这不是对象字面量的工作方式。 - Felix Kling

我的错误。我不知道为什么，但我忘记了构造函数创建执行上下文。 - Dan

但是为什么这行代码能够正常工作 this.userSelections.providers = this.getProviders();？ - user233232

@user233232：因为现在调用this.getProvider时，this.userSelection已经存在了。我们在前面的语句中创建了它：this.userSelections = {types: this.getTypes()}; - Felix Kling

非常感谢您的答案。 - user233232