箭头函数this指向问题踩的坑

最新推荐文章于 2022-08-21 18:39:02 发布

苏小画

最新推荐文章于 2022-08-21 18:39:02 发布

阅读量138

点赞数 1

分类专栏： js基础面试题文章标签： js

本文链接：https://blog.csdn.net/weixin_44404444/article/details/109082464

版权

js基础面试题专栏收录该内容

26 篇文章 1 订阅

订阅专栏

要实现的效果：点击元素获取对应的下标

  <div class="box-item">
        <div></div>
        <div></div>
    </div>
    <script>
       var div=document.querySelector(".box-item");
       var divs=div.querySelectorAll("div")
        for(var i=0;i<divs.length;i++){
           divs[i].index=i;
            divs[i].onclick=()=>console.log(this.index)
            这里的this指向是window,因为箭头函数没有this，所以会往上找.

老老实实写普通函数吧（苦笑）

<body>
    <div class="box-item">
        <div></div>
        <div></div>
    </div>
    <script>
       var div=document.querySelector(".box-item");
       var divs=div.querySelectorAll("div")
        for(var i=0;i<divs.length;i++){
       divs[i].onclick=function(){
         console.log(this.index)
         console.log(this)
         //this指向的就是谁调用this指向谁
        }
        }
        
    </script>