如何在类(ES6)的构造函数中将方法绑定到`this`?

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;

我在main.js文件中使用我的插件,如下所示:

src/main.js

import changeBGColor from './index.js';

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

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

addEventListeners 方法,我有以下代码:

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

如你所见,我使用 bind() 将此的范围绑定到类 changeBGColor ,但我不想这样做。

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.

问题是上述方法也不起作用。我从GitHub存储库复制了上面的解决方案,所以我的问题是为什么上面的解决方案对我不起作用,更重要的是,它到底在做什么,因为 this.onClick = this.onClick.bind(this);

附笔。 我不想用箭头函数来回避这个问题,我知道这很好。

以下是该插件的工作示例: JSfiddle