前端js点击事件中普通函数与箭头函数里面this指向问题

HTML示例代码：

    <ul>
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
    </ul>

1.普通函数

当用function(){}时点击对应的li标签，浏览器控制台中返回的this为对应的li对象。

js示例代码：

    <!--js-->
    <script type="text/javascript">
        let liArr = document.getElementsByTagName("li");
        for (let i = 0; i < liArr.length; i++) {
            liArr[i].onclick=function () {
                console.log(this)
            }
        }
    </script>

2.箭头函数

如果onclick后的使用()=>{}函数时，浏览器控制台中返回的this对象为Window对象，这个时候就得不到，想要对应点击的li对象了。

js示例代码：

for (let i = 0; i < liArr.length; i++) {
    liArr[i].onclick=()=>{
        console.log(this)
    }
}

想要得到对应点击的li对象以下代码可获取到对应的li对象。

js示例代码：

for (let i = 0; i < liArr.length; i++) {
    liArr[i].onclick=(e)=>{
        console.log(e.target)//target事件属性返回触发事件的元素
    }
}