JavaScript为什么'this'没有正确绑定

Question

看看这个小提琴：
https://jsfiddle.net/2aLht10r/1/

当我想要的是undefined时，你可以看到我得到B。 出于某种原因，第11行中的这个是undefined，它应该是第17行（类a中）创建的B对象的内容。

我的代码出了什么问题？

这是小提琴代码：

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)