Как привязать метод к `this` внутри конструктора класса (ES6)? - PullRequest
0 голосов
/ 22 октября 2018

Итак, у меня есть следующий простой плагин 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 .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...