Question

Javascript noob问题 - 以下哪项是最佳做法和表现友好，也欢迎任何其他建议。这是原始项目的最简单版本。将有20多个变量和10个以上的内部函数（例如：案例中的“过程”）。

方法1的优点是它不需要向函数发送参数，而是嵌入main函数内的所有函数（可能为Foo的每个实例重新生成所有内部函数）。虽然方法2没有函数嵌套，但需要大量参数。请注意，Foo构造函数也会有多个实例。

方法1：

function Foo () {
    var a = 1;
    var b = 2;
    var c = (a+b)/2;
    var $element = $('#myElement');

    var process = function (){
        var x = a+b+c;
        $element.css('left', x)
        return x;
    }   
    x = process ();
}

方法2：

function Foo () {
    var a = 1;
    var b = 2;
    var c = (a+b)/2;
    var $element = $('#myElement'); 
    x = process (a, b, c, $element);
} 

function process (a, b, c, $element){
    $element.css('left', x)
    return x;
}

Answer 1

分离的功能绝对是表现的方式。虽然有些情况下嵌套函数的变量范围很好，但如果函数很大，性能损失可能很大。

请记住，每次调用Foo时，var进程都会为正在创建的新函数重新分配所有内存，而不是将函数保留在内存中并只传递新参数。如果函数很大，对于Javascript解释器来说这将是一项非常紧张的任务。

以下是一些可能有用的硬数据（包含您可以在自己的浏览器中运行的性能比较和实际基准测试）：http://jsperf.com/nested-functions-speed，http://jsperf.com/nested-named-functions/5

Answer 2

实际上，浏览器确实甚至优化了嵌套函数，与外部作用域中声明的函数相比，性能差异可以忽略不计。

我在博客my findings上创建了performance test以支持此声明。

编辑：测试被破坏，after fixing测试表明，嵌套功能仍然更快。

Javascript - 参数Vs嵌套函数与性能

2 个答案: