与范围函数相对的“ 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'); ）。