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