在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为循环的每次迭代创建一个新的函数对象.