title: JavaScript why the 'this' isn't binded correctly
body: <p>Take a look at this fiddle:<br>
  <a href="https://jsfiddle.net/2aLht10r/1/" rel="nofollow noreferrer">https://jsfiddle.net/2aLht10r/1/</a>
  <a href="https://i.stack.imgur.com/75yuv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/75yuv.png" alt="enter image description here"></a></p>
  
  <p>You can see that I am getting <code>undefined</code> when what I want is to get <code>B</code>.
  For some reason, the this in line 11 is <code>undefined</code> where it should be the this of the <code>a</code> object created in line 17 (within class <code>B</code>).</p>
  
  <p>What is wrong with my code?</p>
  
  <p>Here is the fiddle code:</p>
  
  <pre><code>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();
  </code></pre>