與范圍函數相對的“ click”事件調用外部函數。 這本質上就像在dom中添加內聯JavaScript嗎？

Question

我的一個朋友（比我更精通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

您甚至不需要將其綁定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/

Answer 2

如果在循環外聲明該函數，則只需聲明一次。 從理論上講，這樣會更有效。 但是現在在循環中，您需要在每次迭代中聲明一個匿名函數。 沒必要，您可以使用對函數的引用 ： element.on('click', showI)並將element.on('click', showI)的元素showI為this （或$(this) ，因此var iVal = $(this).attr('iteration'); ）。