这个 JavaScript/jQuery 语法是如何工作的：(function(window, undefined) { })(window)？

Question

你有没有看过 jQuery 1.4 源代码的底层并注意到它是如何以下列方式封装的：

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

我读过一篇关于JavaScript Namespacing 的文章和另一篇名为“An Important Pair of Parens”的文章，所以我对这里发生的事情有所了解。

但我以前从未见过这种特殊的语法。 undefined 在那里做什么？而为什么window需要通过，然后又出现在最后？

Answer 1

undefined 是一个普通变量，可以简单地使用undefined = "new value"; 进行更改。所以 jQuery 创建了一个真正未定义的本地“未定义”变量。

出于性能原因，window 变量是本地变量。因为 JavaScript 在查找变量时，首先会遍历局部变量，直到找到变量名。如果没有找到，JavaScript 会遍历下一个作用域等，直到它过滤掉全局变量。因此，如果 window 变量是本地的，JavaScript 可以更快地查找它。 更多信息：Speed Up Your JavaScript - Nicholas C. Zakas

Answer 2

未定义

通过将undefined 声明为参数但从不向其传递值可确保它始终是未定义的，因为它只是全局范围内的一个可以被覆盖的变量。这使得a === undefined 成为typeof a == 'undefined' 的安全替代品，后者可以节省一些字符。它还使代码更易于压缩，例如 undefined 可以缩短为 u，从而节省更多字符。

窗口

将window 作为参数传递会在本地范围内保留一个副本，这会影响性能：http://jsperf.com/short-scope。现在，对window 的所有访问都必须在作用域链上少上一级。与undefined 一样，本地副本再次允许更积极的缩小。

---

旁注：

虽然这可能不是 jQuery 开发人员的意图，但传入 window 允许库更容易地集成到服务器端 Javascript 环境中，例如 node.js - 其中没有全局 window目的。在这种情况下，只需更改一行即可将window 对象替换为另一行。在 jQuery 的情况下，可以创建一个模拟的 window 对象并将其传入以进行 HTML 抓取（jsdom 等库可以做到这一点）。

Answer 3

其他人已经解释了undefined。 undefined 就像一个可以重新定义为任何值的全局变量。如果有人在某处写了undefined = 10，这种技术是为了防止所有未定义的检查被破坏。无论变量 undefined 的值如何，都保证永远不会传递的参数是真实的undefined。

通过窗口的原因可以用下面的例子来说明。

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

控制台记录什么？ window 对象的值对吗？错误的！ 10？错误的！它记录undefined。 Javascript 解释器（或 JIT 编译器）以这种方式重写它 -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

但是，如果您将 window 变量作为参数，则没有 var，因此没有意外。

我不知道 jQuery 是否正在这样做，但如果您出于某种原因在函数中的任何位置重新定义 window 局部变量，最好从全局范围借用它。

Answer 4

window 是这样传入的，以防万一有人决定在 IE 中重新定义窗口对象，我假设 undefined 也是如此，以防以后以某种方式重新分配。

该脚本中的顶部window 只是将参数命名为“窗口”，这是一个比全局window 引用更本地化的参数，它也是这个闭包内的代码将使用的。最后的 window 实际上是指定第一个参数要传递的内容，在这种情况下，window 的当前含义...希望在此之前你还没有搞砸 window。

通过显示 jQuery 中使用的最典型案例，插件.noConflict() 处理可能更容易想到，因此对于大多数代码您仍然可以使用$，即使它意味着什么其他 比jQuery 超出此范围：

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

Answer 5

经过 1000000 次迭代测试。这种本地化对性能没有影响。在 1000000 次迭代中甚至没有一毫秒。这根本没用。