ES6在点击事件上执行函数[重复]

Question

这是我代码的一小部分。问题就在于此。“this”下面的代码引用了HomeView类，因为我这样做了。_changeLanguage.bind（this）。如果我移除绑定（this）部分，那么它将引用li元素，但我无法调用它。\ u renderHTML（）方法。

class HomeView extends BaseView{

    constructor(model){
        super(null, model);
    }

    _renderHTML(){
        this.$view.html(template(this.model));
        return this.$view;
    }

    _init(){
        this.$view.on("click", "#langs li", this._changeLanguage.bind(this));
    }

    _changeLanguage(){
        console.log($(this).data("lang"));
        this._renderHTML();
    }

}

在这样的单击事件上运行_changeLanguage方法的最干净的方法是什么。

Answer 1

您应该能够这样编写您的_changeLanguage（）方法：类HomeView扩展BaseView{

    _changeLanguage = () => {
        console.log($(this).data("lang"));
        this._renderHTML();
    };
}

fat arrow语法为您提供了对此的隐式绑定，因此您可以将其他代码更改为：

_init(){
    this.$view.on("click", "#langs li", this._changeLanguage);
}

因此，没有更多的bind（）...这都是隐式的，这要归功于ES6。