javascript - 方法中this指向?
本文介绍了javascript - 方法中this指向?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
class BtnComponent{
constructor(){
this.state = {isLiked: false};
}
//改变文本
changeLikeText(){
var likeText = this.el.querySelector('.like-text');
this.state.isLiked = !this.state.isLiked;
likeText.innerHTML = this.state.isLiked ? '取消' : '点赞';
}
stringDom(string){
var div = document.createElement('div');
div.innerHTML = string;
return div;
}
render(){
this.el = this.stringDom('<button class = "like-button"><span class = "like-text">点赞</span><span>AA</span></button>');
this.el.addEventListener('click', this.changeLikeText.bind(this));
return this.el;
}
}
这是一个点赞的插件,请问这句代码中后两个this分别指什么?为什么这么写?this.el.addEventListener('click', this.changeLikeText.bind(this))
解决方案
都是指的BtnComponent
的实例,之所以要这么写,是因为后面的this.changeLikeText
方法是作为事件回调,当其被调用时,其内部this不是指向我们所要的BtnComponent
实例,如果changeLikeText
方法内会用到this并且是希望指向BtnComponent
实例的话,回调被执行时这将会出现问题,所以需要加一个bind
来绑定好this. 这样,就能正常的执行逻辑,而不至于可能出现xxx is not a function
之类的报错.
ps: 题主可以搜一下sf里关于 this指向的文章,加深对this的理解:https://segmentfault.com/sear...
这篇关于javascript - 方法中this指向?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文