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。



全栈前端 / JavaScript语法 :





















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.