我在 javascript 中工作了一段时间，通常做这样的事情只是为了缓存在深层结构或“命名空间”中声明的函数的属性值

//global scope
(function ($, lib) {
  //function scope 1
  var format = lib.format, // instead of calling lib.format all the time just call format
    touch = lib.pointer.touch, //instead of calling lib.pointer.touch each time just touch
    $doc = $(document),
    log = logger.log; //not console log...


  $doc.on('app:ready', function () {
    //function scope 2
    $doc.on('some:event', function (e) {
      //function scope 3
      //use the cached variables
      log(format('{0} was triggered on the $doc object', e.type);
    });

    $doc.on(touch, function (e) {
      //function scope 3
      log(format('this should be {1} and is... {0} ', e.type, touch);
    });
  }); 
}(jQuery, lib));

我这样做是因为:

• 像我一样懒惰，写 touch 似乎比写 lib.pointer.touch 更有吸引力，即使具有高级自动完成功能的强大 IDE 可以帮助解决这个问题，touch 更短。
• 最小化器可以将单个私有(private)变量转换为单个字母变量，所以它对我来说也很有意义(我知道，我知道，永远不要过早优化，但我想这似乎是安全的)

所有以这种方式编写的代码似乎在移动设备和桌面浏览器上都能正常运行，因此这似乎是一种安全的做法(在“实践”中，双关语意)。但是我因为这依赖于闭包，并且内部函数必须创建一个闭包来保存它被声明的上下文我想知道...

• 如果一个函数不使用来自外部上下文的变量(自由变量)...闭包上下文是否仍然保存？ (或者如果我一棵树倒在树林里而没有人在那里听到它，它仍然会发出碰撞声吗？呵呵)我知道这可能因 javascript 引擎而异，因为 ECMA 没有提及是否需要保存不访问外部变量时的上下文。

• 如果上面的表达式为真...这 block 代码会不会更有效率？

  //global scope
  (function ($, lib) {
    //function scope 1
    var format = lib.format,
      touch = lib.pointer.touch,
      $doc = $(document),
      log = console.log;
  
    $doc.on('app:ready', function () {
  
      (function ($doc, touch, lib, format) {
        // since all the variables are provided as arguments in this function
        // there is no need to save them to the [[scope]] of this function
        // because they are local to this self invoking function now
        $doc.on('some:event', function (e) {
          //function scope 3
          //use the cached variables
          log(format('{0} was triggered on the $doc object', e.type);
        });
  
        $doc.on(touch, function (e) {
          //function scope 3
          log(format('this should be {1} and is... {0} ', e.type, touch);
        });
      }($doc, touch, lib, format));      
  
    }); 
  
  }(jQuery, lib));
  

它是否更有效，因为它将这些变量传递给自立即调用函数？创建新函数的成本是否会对代码产生任何影响(负面或正面)？

• 如何以可靠的方式正确测量我的 javascript 库的内存消耗？我有 100x 小的 javascript 模块，它们都在即时自调用函数中，主要是为了避免变量泄漏到全局上下文中。所以它们都被包裹在与上面提到的代码块非常相似的模块中。

• 将变量缓存得更近是否会有更好的效果，即使这意味着我将不得不在更接近它们将要使用的位置重复声明变量？

• 我有一种感觉，如果要查找不在当前本地上下文中的变量，引擎将首先查看父作用域并遍历该级别的所有变量...每个级别的变量越多，情况越糟可能是寻找变量的性能。

• 尝试从内部闭包中查找一个 undefined variable 将是最昂贵的，因为根据定义，该变量将首先在父范围内搜索直到全局范围，如果找不到它，将迫使引擎最终达到全局范围。真的吗？引擎正在优化这种查找吗？

最后...我知道我不想将我的代码作为第二个示例来实现，主要是因为它会使代码更难阅读，而且我对使用第一种方法。我的问题是出于好奇，并试图更好地理解 javascript 的这个非常好的特性。

根据这个测试...

http://jsperf.com/closures-js

似乎第二种方法更快。但是只有在疯狂的迭代次数时才明显...现在我的代码没有进行那么多的迭代...但由于我的编码方式可能会消耗更多内存...

更新:有人向我指出这个问题太大了。对不起，我会尝试分解成小部分。正如我所说，这个问题主要是出于好奇，即使在移动设备上，性能似乎也可以忽略不计。感谢您的所有反馈。

最佳答案

我认为这是过早的优化。您已经知道在大多数情况下性能不是问题。即使在紧密循环中，性能也不会降低到那么糟糕。让 JavaScript 引擎自己优化它，就像 Chrome 已经开始做的那样，通过从闭包中删除不需要的变量。

重要的是，不要通过不必要的优化让您的代码更难阅读。您的示例需要更多代码，从而阻碍了开发。在某些情况下，我们被迫让代码更难阅读，因为我们知道应用程序的特定部分需要更多的内存/性能，但只有在那个时候我们才应该这样做。

如果你在下面的代码中添加一个断点(在 Chrome 中)，你会看到 world 变量已经优化出了闭包，查看 Scope 下的 'Closure' 节点变量 http://jsfiddle.net/4J6JP/1/

.

(function(){
   var hello = "hello", world="world";
    setTimeout(function(){
        debugger;
        console.log(hello);
    });
})()

请注意，如果您在该内部函数中添加一个 eval，那么所有的赌注都会关闭，并且无法优化闭包。

关于Javascript 闭包性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14974811/