Question

所以我有以下简单的ES6插件，可用于更改元素的背景（出于演示目的而创建）：

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;

我正在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);对我完全没有意义，有人可以打破请把这个给我下来。

PS 。我不想使用箭头功能来规避此问题，效果很好，我知道。

这是插件的有效示例：JSfiddle。

如何在类的构造函数（ES6）中将方法绑定到“ this”？

0 个答案: