JS 箭头函数this指向的问题,实例代码
箭头函数this指向
JavaScript中的箭头函数中也可以使用this关键字,但这this会指向哪里呢,跟常规的JS函数的指向是否一样呢?实际上,箭头函数并不会对this进行绑定,箭头函数中的this始终指向object window。而常规函数中的this可以指向窗口、HTML元素等等。
箭头函数this指向实例代码,及在线编辑器
如下代码,将分别从常规函数、HTML元素的点击处理函数,以及箭头函数三个方面区别this的不同指向:
<button id='cg'>常规函数this指向</button><br><br>
<button id='jt'>箭头函数this指向</button>
<script>
function cg(){
alert(this)
}
jt = () => {alert(this)}
cg()
jt()
document.getElementById("cg").addEventListener("click", cg);
document.getElementById("jt").addEventListener("click", jt);
</script>
实例代码解析
上面的实例在线运行之后,第一次弹出的是cg()调用的窗口,第二次是jt()的。但点击常规函数this指向的按钮之后,触发的是addEventListener("click", cg)监听,调用cg()函数,点击第二个按钮触发的是下一个监听,调用jt()函数。jt()函数前后两次的调用显示的都是object window。