javascript - 命名事件处理程序是否比 JavaScript 中的匿名事件处理程序消耗更多内存？

Question

我的问题是这段代码

var list = document.querySelectorAll("div");
for (let i = 0; i < list.length; i++) {
  list[i].addEventListener("event", function (event) {
    /* some code */
  });
}

比

消耗更多的内存

var list = document.querySelectorAll("div");
function handler(event) {
  /* some code */
}
for (let i = 0; i < list.length; i++) {
  list[i].addEventListener("event", handler);
}

这个？
如果我没记错的话，第一个代码存储列表中每个项目的事件处理程序，但第二个代码只存储一次。是真的吗？

Answer 1

视情况而定。

首先，所有的函数都有名字。在匿名函数的情况下，名称只是空字符串。所以这两种情况的区别是节省了大约 6 个字节，因为一个函数的名称是 "handler" 而另一个函数的名称是 ""。

您可能想知道，在第一个版本中，是否在循环的每次迭代中都创建了一个新函数。在这种情况下，这不是必需的。

这取决于函数是否包含对i 的任何引用。如果是这样，则每次迭代都需要创建一个闭包来引用该迭代的 i 范围。将只有一个函数，但有多个闭包。

但是，如果这两个片段是等效的，handler() 不能引用 i。所以在这种情况下应该不需要多次关闭。