javascript - 'this' doesn't work when assign and bind to a variable

Question

I'm trying to create a custom module. I'm using prototype to add additional methods. The module will have an event, in which I will have to access a method from the module with 'this'. I will do that using bind.

I ran into a slight problem. I created a method, then using prototype, I assigned the method to a variable with the bind method. The problem is, 'this' isn't the one I passed through bind. Here's the sample code:

JSFiddle

function MyPlugin() {
  this.hello = 'hello'
  document.addEventListener('click', this.clickedBinded);
  this.clickedBinded('e');
}

MyPlugin.prototype.clickedBinded = clicked.bind(this);

function clicked(e) {
  console.log(this.hello, e);
}

var plugin1 = new MyPlugin();

Answer 1

.bind() has to be called AFTER the object you want it to be bound to has already been created and when you're in the right context to have a reference to the desired object. You are calling .bind() when your code is first loaded. That will not have a meaningful value for this. Instead, change your code to this:

function MyPlugin() {
  this.hello = 'hello';
  // save bound function so you can use it to remove the listener later
  this.fn = this.clicked.bind(this);
  document.addEventListener('click', this.fn);
  this.clicked('e');
}

MyPlugin.prototype.clicked = function(e) {
  console.log(this.hello, e);
}

// method that will remove the event listener
MyPlugin.prototype.stopClick = function() {
    document.removeEventListener('click', this.fn);
}

var plugin1 = new MyPlugin();