js原生onclick如果用箭头函数this指向如何获得？

Question

问题描述

我们平时都用箭头函数来获得原来的this,但是反过来，如果js原生dom操作，比如onclick如果用箭头函数如何拿到它的this。

问题出现的环境背景及自己尝试过哪些方法

原生操作dom

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

不用箭头函数正确的做法

for (let i = 0; i < iconPlus.length; i++) {
    iconPlus[i].onclick = function () {
    //this指向正确
      clickInitModal(this);
      
    }
  }

用箭头函数的做法会找不到this

问题如果用箭头函数 如何获取this?

for (let i = 0; i < iconPlus.length; i++) {
    iconPlus[i].onclick = function () {
    //this指向正确
      clickInitModal(this);
      
    }
  }

我期待的结果。

如果用箭头函数 如何获取它的点击事件this

Answer 1

箭头函数并不是万能的。

因为用箭头函数去触发一个函数，当回调发生时，浏览器会用iconPlus[i]的上下文去调用这个函数，这时this的指向是window。

解决的办法，就是用回传统的函数表达式，这也并没有什么不好的。并不是新的模式出来，就一定要抛弃老的。

Answer 2

箭头函数本身是没有this和arguments的，在箭头函数中引用this实际上是调用的是定义时的上一层作用域的this。
这里强调的是上一层作用域，是因为对象是不能形成独立的作用域的。还有就是兄弟这么喜欢用ES6的语法呀，可ES6的有些语法现在的浏览器还做不到全部都能解析的，你喜欢用原生写本身没有错，原生毕竟优化，兄弟你这个还可以继续优化具体你可以试试用WEBwork试试，我的文章中也有对WEBwork的讲解

Answer 3

箭头函数没有自己的作用域，所有的this都指向window。

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

这么试试，不知道能不能获取到。。。