IIFE and parameter

IIFE and parameter

本文关键字：parameter and IIFE      更新时间：2023-11-11

这是一个代码

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

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

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

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

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

首先，它可以被视为一个风格问题。我更喜欢

(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);

这个片段做了两件事：

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

最可能的用例是jQuery。

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

这样，无论您加载什么其他库，如Prototype或Mootools，您的代码在IIFE中都是安全的。您还可以使用此模式传递其他库，如Prototype和Mootools。

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

希望这能有所帮助！

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

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); 
    }
  );    
}

演示

相关文章：