理解EventListener中匿名函数的变量作用域问题

核心原因：事件监听器的回调参数规则 #

浏览器触发事件时，只会给监听回调传递一个参数——事件对象（通常用e或event表示）。你在回调里定义的额外参数，浏览器不会自动填充值，默认就是undefined。

逐个分析你的代码例子 #

• 红色方块：回调是无参箭头函数，直接访问上层作用域的square1，这是JavaScript闭包的特性——内部函数可以访问外部作用域的变量，所以能正常打印'red'。
• 橙色方块：回调里定义了square2参数，这个参数其实接收的是浏览器传的事件对象，和你上层定义的square2变量完全没关系（参数名遮蔽了上层变量），所以打印的是event对象。
• 绿色方块：回调里定义了e和square3两个参数，浏览器只传了事件对象给e，square3没有被赋值，所以输出undefined。而且这里的square3参数遮蔽了上层的square3变量，就算你想访问上层的，也会被参数挡住。
• 蓝色方块：square4参数设置了默认值'blue'，因为浏览器没传第二个参数，所以直接用默认值，和上层的square4变量无关。

怎么访问上层变量？ #

完全不需要“传入”，闭包本来就支持直接访问，只要别在回调参数里定义同名变量就行。修改绿色方块的代码如下：

document.querySelector('.square.three').addEventListener('click', (e) => console.log(square3));

这样就能直接打印上层的'green'了。

如果遇到变量后续会被修改，想保存当前值的情况，可以用闭包封装：

const square3 = 'green';
document.querySelector('.square.three').addEventListener('click', ((color) => {
  return (e) => console.log(color);
})(square3));

这种方式会把square3当前的值'green'保存到闭包里，后续即使square3被修改，回调里还是会打印原来的值。

内容的提问来源于stack exchange，提问作者Rounin