addEventListener传函数引用与内部声明的性能差异及函数重建疑问

一、事件触发时函数是否会被重新创建？ #

不管是哪种写法，函数都不会在事件触发时重新创建，两者的创建时机不同：

• 写法一：fun函数在代码执行到函数声明语句时就完成创建，整个生命周期内只会生成一次实例。调用addEventListener时只是把这个已存在的函数引用传递给监听器，触发事件时直接调用该实例。

  function fun(){
      a += b;
  }
  element.addEventListener("click",fun);
  

• 写法二：这里的匿名函数是在代码执行到addEventListener这一行时创建的，同样只会生成一次实例。事件触发时调用的就是这个在绑定阶段创建好的函数，不会每次触发都重新生成。

  element.addEventListener("click", function(){
      a += b;
  });
  

二、微性能层面的差异 #

在普通业务场景下，两种写法的性能差异完全可以忽略，只有在极端高频绑定的场景（比如每秒绑定数万次监听器）才会体现出细微区别：

• 写法一：函数在作用域初始化阶段就已创建，绑定监听器时仅传递引用，几乎没有额外开销。
• 写法二：绑定监听器时需要额外完成一次函数对象的创建，这个过程的开销极小，对页面性能不会产生可感知的影响。

如果是在循环中批量绑定监听器，写法二如果不做优化（比如每次循环都创建新的匿名函数）会生成多个函数实例，可能带来微小的内存开销，但单次绑定的场景下无需担心。

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