DEV Community

Discussion on: What the beep is 'this' in JavaScript

View post
Collapse
 
beitist profile image
Sebastian Stüwe •

Hi Brit,

can you explain the implicit binding a bit more? I had situations where this wouldn't function, but I couldn't find out why (not); in particular with stacked calls.

Apart from that - very helpful! :-)

All the best,
Sebastian.

Collapse
 
brityhemming profile image
Brit Hemming •

Hey Sebastian, Thanks for your comment. Could you give me an example of where implicit binding didn't work for you?

Collapse
 
beitist profile image
Sebastian Stüwe •

Hi Brit,

sorry for the late response - I couldn't exactly remember where it happened, but now I found the problem:

Assume the following micro-example:

START_NODE = document.getElementById('start');

class Major {
  constructor() {
    this.minor = new Minor();
    this.handler = '';
  }

  initHandler() {
    this.handler = new Handler();
  }

  listenToHandler(parameter) {
    this.minor.someValue = parameter;
  }

}

class Minor {
  constructor() {
    this.someValue = '';
  }
}

class Handler {
  constructor() {
    this.button = document.createElement('button');
    this.button.innerText = 'Click!';
    this.button.addEventListener('click', major.listenToHandler.bind(3));
    START_NODE.appendChild(this.button);
  }
}

let major = new Major();
major.initHandler();
Enter fullscreen mode Exit fullscreen mode

Here's a possible corresponding html-file:

<!DOCTYPE html>
<html>
  <head>
    <script src='bindproblem.js' defer></script>
  </head>
  <body>
    <div id='start'></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

You'll notice that JS throws a TypeError which must have something to do with the scope, I presume. I've usually found workarounds, but I do not like them. I'd like to really understand the problem.

Thanks!
Sebastian.

Thread Thread
 
brityhemming profile image
Brit Hemming •

This is likely a scope issue. A couple of things to know about classes:

  • classes are not hoisted - that means if we are putting our information above a class we have referenced it will not work
  • they use strict - it prevents window binding, forces us to write cleaner code with errors if we do not
  • Methods are a special syntax
  • A constructor function is visible

In your case point 1 is the issue - classes are not hoisted. You've created Handler below where you are invoking it.

Here's a codepen where I explain classes a little deeper. Hopefully that's helpful :)

codepen.io/BritHemming/pen/WNvYJMr