javascript - "click"事件调用外部函数而不是作用域函数。这本质上就像将内联 javascript 附加到 dom 吗？

Question

我的一个 friend (他比我更熟练使用 javascript)最近正在帮助我优化一些代码，他提到的可能有帮助的事情之一是调用外部函数而不是使用作用域函数。然而，这实际上似乎对性能没有太大影响(如果有的话)。任何更熟悉 javascript 内部工作原理的人都会解释为什么会出现这种情况吗？有什么理由使用一种方法而不是另一种方法吗？

我的意思是:

function showI(e) {
    var iVal = $(e).attr('iteration');
    var iValx99 = iVal * 99;
    var iValx999 = iVal * 999;
    alert(iVal + ' // ' + iValx99 + ' // ' + iValx999);
}
var element;
for (var i = 0; i < 50; i++) {
    element = $('<div />', {
        'class': 'iteration',
        'iteration': i
    });
    element.on('click', function() {
        showI(element);
    });
    element.appendTo('body');
}

对比:

var element;
for (var i = 0; i < 50; i++) {
    (function() {
        var j = i;
        element = $('<div />', {
            'class': 'iteration'
        });
        element.on('click', function() {
            var iVal = j;
            var iValx99 = iVal * 99;
            var iValx999 = iVal * 999;
            alert(iVal + ' // ' + iValx99 + ' // ' + iValx999);
        });
        element.appendTo('body');
    })();
}

jsperf 基准测试示例:

http://jsperf.com/function-click-on-every-element-vs-calling-a-function/2

Answer 1

好吧，无论如何，每次都定义一个新函数，你就会放弃使用静态函数所带来的性能提升。

他的意思可能是使用这个:

element.on('click', showI ); //Just passing an already created function is cheaper than creating a new function object everytime

您甚至不需要绑定(bind)它 50 次:

$("body").on("click", ".iteration", showI );

并修改showI:

function showI(e) {
    var iVal = $(this).attr('iteration');
    var iValx99 = iVal * 99;
    var iValx999 = iVal * 999;
    alert(iVal + ' // ' + iValx99 + ' // ' + iValx999);
}

这在修改后的 jsperf 中要快得多 http://jsperf.com/function-click-on-every-element-vs-calling-a-function/3

jsfiddle:http://jsfiddle.net/RgU5z/