在 javascript 中，定义内联函数与将其作为引用传递有何权衡？

Question

因此，假设我有一大组元素想要附加事件侦听器。例如，我希望单击时每行都变成红色的表格。

所以我的问题是哪个最快，哪个使用最少的内存。我知道这（通常）是一种权衡，所以我想知道每个方案的最佳选择。

使用表示例，假设有一个所有行元素的列表，“rowList”：

选项 1：

for(var r in rowList){
     rowList[r].onclick = function(){ this.style.backgroundColor = "red" };
}

我的直觉是这是最快的，因为少了一个指针调用，但是大多数内存密集型，因为每个行列表都有自己的函数副本，如果 onclick 函数很大，这可能会变得严重。

选项 2：

function turnRed(){
     this.style.backgroundColor = "red";
}
for(var r in rowList){
     rowList[r].onclick = turnRed;
}

我猜这只会比上面的慢一点（哦不，多一个指针取消引用！），但内存密集程度要低得多，因为浏览器只需要跟踪该函数的一份副本。

选项 3：

var turnRed = function(){
     this.style.backgroundColor = "red";
}
for(var r in rowList){
     rowList[r].onclick = turnRed;
}

我认为这与选项 2 相同，但我只是想把它扔掉。对于那些想知道此选项与选项 2 之间有何区别的人：定义函数的 JavaScript 差异

奖励部分：Jquery

同样的问题：与

$('tr').click(function(){this.style.backgroundColor = "red"});

：

function turnRed(){this.style.backgroundColor = "red"};
$('tr').click(turnRed);

和：

var turnRed = function(){this.style.backgroundColor = "red"};
$('tr').click(turnRed);

Answer 1

这是您的答案：

http://jsperf.com/function-assignment

选项 2 速度更快，使用更少记忆。原因是选项 1 为循环的每次迭代创建一个新的函数对象。

Answer 2

就内存使用而言，您的选项 1 正在为数组中的每一行创建一个不同的函数闭包。因此，此方法将比选项 2 和选项 3 使用更多的内存，后者仅创建一个函数，然后传递对其的引用。

出于同样的原因，我也希望选项 1 是三者中最慢的。当然，实际性能和内存使用方面的差异可能非常小，但如果您想要最高效的方法，请选择选项 2 或 选项 3 （它们几乎相同，两者之间唯一真正的区别是 turnRed 可见的范围）。

对于 jQuery，所有三个选项都将具有相同的内存使用和性能特征。在每种情况下，您都会创建并向 jQuery 传递单个函数引用，无论您是否内联定义它。

您的问题中没有提到的一个重要注意事项是，使用大量内联函数可能会很快将您的代码变成一团难以阅读的混乱，并使其更难以维护。这并不是什么大问题，因为您的函数中只有一行代码，但作为一般规则，如果您的函数包含超过 2-3 行，则最好避免内联定义它。相反，将其定义为选项 2 或选项 3，然后传递对其的引用。