How to bind a method to `this` inside a constructor of a class (ES6)?

Question

So I have the following simple ES6 plugin that can be used to change the background of an element (created for demo purpose) :

src/index.js

class changeBGColor {

    constructor({ targetBG , triggerEl  }) {
       this.changeBGElem = document.getElementById(targetBG);
       this.triggerElem = document.getElementById(triggerEl);
       this.addEventListeners();
       //this.onClick = this.onClick.bind(this);
       //this.onClick.bind(this);
    }

    addEventListeners() {
        this.triggerElem.addEventListener( 'click' , this.onClick.bind(this) );
    }

    changeBG() {
       const bgChangeBgElem = this.changeBGElem;
       bgChangeBgElem.classList.toggle('myclassName');
    }

    onClick(ev) {
      console.log(this);                
      if( ev.target.hasAttribute('data-changeBG') ) {
         this.changeBG();
      }
    }

}

export default changeBGColor;

And I am using my plugin in my main.js file like so:

src/main.js

import changeBGColor from './index.js';

new changeBGColor({
    targetBG : 'changeBGOne',
    triggerEl : 'triggerBGOne'
});

new changeBGColor({
    targetBG : 'changeBGTwo',
    triggerEl : 'triggerBGTwo'
});

Now the problem i have is inside addEventListeners method, I have the following code:

    this.triggerElem.addEventListener( 'click' , this.onClick.bind(this) );

As you can see I use bind() to bind the scope of this to the class changeBGColor , but I don't want to do this in this manner.

I want something like:

this.onClick = this.onClick.bind(this); // i don't really know what this does, saw it in another plugin, but somehow , this does't work for me.

The problem is the above doesn't work either. I copied it above solution from a GitHub repository, so my question is why does the above solution not work for me and more importantly what is it really doing because this.onClick = this.onClick.bind(this); doesn't make sense to me at all, can somebody break this down for me, please.

P.S. I don't want to use arrow functions to circumvent this problem, that works fine, I know.

Here is a working example of the plugin: JSfiddle.

Possible duplicate of [Use of the JavaScript 'bind' method](https://stackoverflow.com/questions/2236747/use-of-the-javascript-bind-method) — vrintle, Oct 22 '18 at 06:40
*"The problem is the above does't work either."* Yes, it does: http://jsfiddle.net/4do2L9mn/ Please update your question with a [mcve] demonstrating the problem you're having with it, ideally a **runnable** one using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)). — T.J. Crowder, Oct 22 '18 at 06:40
`this.onClick = this.onClick.bind(this);` works fine but you have to bind methods before `this.addEventListeners()` call. — Rango, Oct 22 '18 at 06:44
@T.J.Crowder Good day to you sir , i am a fan of you :) , do you mean this line `this.onClick = this.onClick.bind(this);` works for you ? i have updated a fiddle , and this is already a minimal example , i was trying to understand a plugin code on git , hence i created this , i can't strip this down any further , but let me know if thats needed and i'll try . Thank you. — Alexander Solonik, Oct 22 '18 at 06:47
@AlexanderSolonik - Thanks! :-) Yes, it works fine and is quite standard practice. Sorry, in the fiddle above I forgot to actually use it, though: http://jsfiddle.net/4do2L9mn/1/ Note that you have to `bind` **before** calling `addEventListeners`, perhaps that's where you're going wrong, since the commented-out call in your code had it the other way around. Re the MCVE: Please use Stack Snippets, not jsFiddle. — T.J. Crowder, Oct 22 '18 at 06:48
`this.onClick = this.onClick.bind(this);` is not necessary if you do `this.triggerElem.addEventListener( 'click' , this.onClick.bind(this) );`. There is no point in binding the function twice. — Felix Kling, Oct 22 '18 at 07:34
@FelixKling , i did't want to be doing this `this.triggerElem.addEventListener( 'click' , this.onClick.bind(this) );` — Alexander Solonik, Oct 23 '18 at 06:05

How to bind a method to `this` inside a constructor of a class (ES6)?

0 Answers0