了解 IIFE答案 - 爱码网

【问题标题】：Understanding IIFE了解 IIFE
【发布时间】：2017-11-26 04:45:41
【问题描述】：

在我的页面中，我有几个 img 标签如下：

<img class="img-fluid meeseks" src="img/meeseks_red.jpg" data-color="#ee5b61" />

在我创建的 js 文件中：

function Store(path,color){
    this.path=path
    this.color=color}

然后，开始编写代码，我写了这个：

img_path=[]
    for (var i=0;i<img.length;i++){
        img_path.push( new Store(img[i].getAttribute("src"),img[i].getAttribute("data-color")))
    }

获取存储每张图片的src和颜色的对象数组。

现在，研究 IIFE，我写的这个似乎也有效：

(function store_inf(){
    img_path=[]
    for (var i=0;i<img.length;i++){
        img_path.push( new Store(img[i].getAttribute("src"),img[i].getAttribute("data-color")))
    }
    return img_path

})()

在这种情况下哪种方式更好？我还注意到，如果我省略 return 事情正常工作（如果我记录 img_path 数组，我总是有一个对象数组）

所以 IIFE 在全局范围内返回一个永久的数组，即使在 IIFE 被调用之后？谢谢

【问题讨论】：

没有。如果您使用变量而不声明它，它将成为全局范围的一部分。生命是无用的。
ok 正确的解决方案是： var img_path=[] for (var i=0;i

标签： javascript iife

【解决方案1】：

img_path之所以是全局的，与IIFE无关。它是全局的，因为您没有使用 var 关键字声明它。未使用var（或const，或let）声明的所有内容都将附加到全局范围，在您的情况下，它将附加到window 对象。只需在您的 IIFE（或非 IIFE）代码版本之后尝试 console.log(window.img_path)。

我建议你开始在你的 js 中使用use strict，因为它会指出更多“不明显”的错误。

【讨论】：

【解决方案2】：

您当前的代码有效，因为 img_path 实际上是 global 并且您的 IIFE 没用。你可以这样做：

var img_path=(function(){
var img=document.getElementByTagName("img");
var img_path=[];//now local
for (var i=0;i<img.length;i++){
    img_path.push( new Store(img[i].getAttribute("src"),img[i].getAttribute("data-color")))
}
return img_path
})()

现在有一个封闭的 img_path 和 img 数组以及一个全局 img_path。

请注意，您也可以这样做：

var img_path=document.querySelectorAll("img").values().map(el=>new Store(el.src,el.getAttribute("data-color")));

【讨论】：

【解决方案3】：

你应该多关心一下分号，它们不是为了休闲，而是因为你需要它们。在某些极端情况下，在没有分号的情况下引入了歧义。也就是说，您不需要函数 namen，如果您不以任何方式（作为参数或赋值）使用结果，则不需要返回任何内容。你也不需要 store 函数，它真的没什么用，只需要使用 JS 对象字面量，如下所示。函数也可以写成：

(function () {
  "use strict";

  var i, img_path;

  img_path = [];
  for (i = 0; i < img.length; i++)
  {
    img_path.push({
      "path": img[i]["src"],
      "color": img[i]["data-color"]
    });
  }

  // TODO: use img_path here because outside this function scope it does not exist
}());
// ^ better parens placement

有关如何编写干净的代码和遵守开源 JS 风格的更多信息，请查看 JSLint 和类似工具。您会看到这样的工具给您带来了多少样式错误。

【讨论】：

【解决方案4】：

这里的 IIFE 并不是真正让您大吃一惊的部分。

在 JavaScript 中，您必须声明变量。如果您在浏览器中使用 JS，而您没有使用严格模式（应该是，一旦您对语言有了更好的处理），您就会知道为什么会发生这些事情。

var x = 1;

function makeGlobalsHappen () {
  y = 2;
  var z = 4;
}

makeGlobalsHappen();
x; // 1
y; // 2
z; // ERROR! z is not defined

这与 IIFE 无关（我没有）。

我是在 ES5 的 opt-in strict-mode 中，还是使用现代 JS 模块（设计上是严格的）：

const x = 1;
const makeGlobals = () => {
  y = 2; // ERROR! y is undefined
  const z = 4;
};
makeGlobals(); // *BOOM*

【讨论】：