JavaScript 为什么 'this' 未正确绑定(bind)

Question

看看这个 fiddle :
https://jsfiddle.net/2aLht10r/1/

你可以看到，当我想要得到 B 时，我却得到了 undefined。 由于某种原因，第 11 行中的 this 是 undefined ，它应该是第 17 行中创建的 a 对象的 this (在类 B 中) )。

我的代码有什么问题吗？

这是 fiddle 代码:

class A {
  selector;
  ui = {
    selector: `${this.selector} aaa`
  }

  constructor(selector) {
    this.selector = selector;
  }

  clog = console.log.bind(null, this.ui.selector)
}

class B {
  selector;
  ui = {
    a: new A('B')
  }

  print = this.ui.a.clog.bind(this.ui.a);
}

new B().print();

Answer 1

操作的顺序让你陷入困境。

class A {
  selector;
  ui = {
    selector: `${this.selector} aaa`
  }

  constructor(selector) {
    this.selector = selector;
  }
}
console.log(new A("thing").ui.selector)

打印 undefined aaa 正如你所说，因为它相当于:

class A {
  constructor(selector) {
    this.ui = {
      selector: `${this.selector} aaa`
    };

    this.selector = selector;
  }
}
console.log(new A("thing").ui.selector);

因此，您的 ui 属性在被分配传递给构造函数的值之前会存储 this.selector + 'aaa'。

也许你这样做会更好:

class A {
  ui = {
    selector: null,
  };

  constructor(selector) {
    this.ui.selector = `${selector} aaa`;
  }
}
console.log(new A("thing").ui.selector)