javascript - 嵌套函数 : am I creating 10 functions here?

Question

我正在处理一个过于复杂的函数(处理器)，所以我将部分功能嵌入其中的嵌套“实用函数”中(打印)。它的简化版本如下所示:

var out = document.getElementById( "output" );

function processor ( n ) {
    function print( msg ) {
        out.innerHTML  += msg;
    }
    while ( n > 0 ) {
        print( n-- );
        print( ", " );
    }
    print( "<br/>" );
}

for ( var i = 0; i < 10; i++ ) {
    processor( i );
}

您可以在 this JSfiddle 中看到它的实际效果.

问题是:我真的创建了实用函数 print() 的 10 个实例吗？如果是，在不将实用程序函数放在 processor() 函数之外的情况下，编写此代码的更有效方法是什么？我希望 print() 函数只能在 processor() 中访问，而不能在其他地方访问。一种解决方案是命名空间。

我读过这个问题，尽管它是相关的，但它不是我的直接答案: Efficiency of creating an event handler in a nested loop: am I creating 1440 functions here?

Answer 1

用 JavaScript 术语来说，是的你是。然而，实际上 JavaScript 引擎本身很可能会重用定义函数的代码，并适当调整范围以供重用。我读过这种方法 being used in Chromium .

要仅在 processor() 中访问打印函数，您必须创建一个 IIFE:

var out = document.getElementById( "output" );

var processor = (function () { 
    function print( msg ) {
        out.innerHTML  += msg;
    }

    return function ( n ) {
        while ( n > 0 ) {
            print( n-- );
            print( ", " );
        }
        print( "<br/>" );
    };

}());

for ( var i = 0; i < 10; i++ ) {
    processor( i );
}

你在这里而不是在循环中重新创建函数的原因是因为 function(例如 processor)定义了一个新的范围，where-as block (循环等)不要；函数声明被提升到作用域的顶部，而不是 block 。