IIFE 和参数

Question

这是代码

(function(x){
    // Some code here
})(1);

上面的代码是 IIFE，所以这意味着它只会被执行一次。 问题：为什么有人需要将参数传递给这个函数（在下面的例子中是 1）？

我可以在函数内部创建变量，如下所示

(function(){
    var x = 1;
    // Some code here
})();

这个问题不是关于闭包是如何工作的，而是关于为什么以及何时使用第一个 Code Pattern 以及何时使用第二个。

Answer 1

一方面，它可以被认为是风格问题。我更喜欢

(function (x, y, z) { … })(1, 2, 3);

结束

(function () { var x = 1; var y = 2; var z = 3; … })();

如果x、y 和z 是我通常会作为参数而不是局部变量传递的（所以我声明它的位置取决于它们所持有的信息）。

但是，对于 jQuery 和其他代码，您基本上可以做的是别名某些名称：

(function (window, undefined) {
    // …
})(window);

这个 sn-p 做了两件事：

• 它将全局window 重命名为本地window。在编写代码时，这绝对没有效果。但是当代码被缩小时，缩小器可以将 IIFE 的参数重命名为w——以及它在函数中的所有用法。这样，window 只需写出一次，这可能会节省相当多的字节。
• 它声明了参数undefined，但没有传递任何东西给它。这会导致名为undefined 的参数保存值undefined。现在它不再那么重要了，但是旧版浏览器允许重新定义 undefined 的值，通过这样做，您可以确保没有其他代码会通过覆盖该值来干扰您的值（当然，这很糟糕要做的事情）。

Answer 2

最可能的用例是 jQuery。

(function($) {
    console.log($);
})(jQuery);

这样，无论您加载何种其他库（如 Prototype 或 Mootools），您的代码在 IIFE 中始终是安全的。您还可以使用此模式传递其他库，例如 Prototype 和 Mootools。

(function($, P, Moo) {
    console.log($);
    console.log(P);
    console.log(Moo);
})(jQuery, $, $$);

希望这会有所帮助！

Answer 3

考虑这两个事件处理程序的行为差异：

var tags = document.getElementsByTagName("a");
for (var i=0, t; t = tags[i]; i++) {
  t.addEventListener("click",
    (function (index) { 
      return function () { 
        console.log("iife - " + index); 
      };
    })(i)
  );
  t.addEventListener("click",
    function () { 
      var index = i;
      console.log("non iife - " + index); 
    }
  );    
}

demo