Question

这是一个代码

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

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

我可以创建变量内部函数，如下面的

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

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

Answer 1

首先，它可以被认为是一种风格问题。我更喜欢

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

在

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

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

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

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

这段代码做了两件事：

它将全局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

IIFE和参数

3 个答案: