关于 IIFE 工作方式的困惑答案

【问题标题】：The confusion about the way how IIFE works关于 IIFE 工作方式的困惑
【发布时间】：2019-05-10 06:12:29
【问题描述】：

我是 JavaScript 的初学者，并且对 IIFE 在 JavaScript 中的工作方式感到困惑。也就是说，我知道它基本上用于转义变量被分配给全局变量以避免冲突。但事情是这样的，比如说，我们有这样的代码：

var number = 7;

(function() {
  var number = 7;
  alert(number);
})();
//In this code collision does not happen due to IIFE

但是如果我写：

var number = 7;

function num() {
  var number = 7;
  alert(number);
}

/*In this code there does not happen collisions and 
number variable is not assigned to the global scope as well. So, why use IIFE?*/
num();

【问题讨论】：

为什么你认为局部变量分配给全局变量？
两个版本都是一样的，只是在第二个中你命名函数并单独执行它，在第一个中这是一起完成的。
@IngoBürk，感谢您的 cmets，是的，我知道，但据我了解，IIFE 基本上用于避免全局变量中的变量冲突。而且由于在两个代码中都没有冲突，所以我可以使用第二个代码而不是 IIFE。或者我错误地理解了 IIFE 的概念。
第二个有一个额外的全局num函数。就是这样。
IIFE 只是一个立即调用的函数，并且不在全局范围内命名。范围不会根据是否立即更改。基本上，它允许您在不专门调用全局范围内的方法的情况下运行代码，同时还具有您调用的范围优势。

标签： javascript iife

【解决方案1】：

立即调用函数表达式 (IIFE) 有不止一种用途。您关注的一个问题是 IIFE 在其中声明变量（或任何其他函数/方法）时不会污染全局范围。

使用 IIFE 所做的另一件重要事情是它允许您的代码立即运行而不会受到其他人的代码干扰。此外，IIFE 无需调用可能存在于全局范围内的函数按名称 即可运行。

这里的关键是你的代码是：不干扰全局范围内的事物，并且受到保护免受外部影响，因为全局范围内的任何内容都可能被错误地覆盖。

...您正在保护您的代码免受可能意外或有时故意更改您的全局变量的人的影响！

查看Mastering IIFEs 上的这篇中型文章了解更多信息。

更新

为什么您的第二个示例可能产生负面影响的一个很好的例子是：

如果您导入某种库，并且它在全局范围内有一个名为 num（该库在内部使用）的方法（因为它没有使用 IIFE），那么您的第二个示例将覆盖该方法，并使其在库中无法使用。

这里的关键是它不仅仅是范围。在任何方法中声明的变量都只限于该方法，而不是全局范围。 但命名函数在全局范围内。

【讨论】：

第二个代码中函数内部的变量是否也不会污染全局范围？
再次，如第一句所述，IIFE 不仅仅是范围。函数中声明的变量不会影响全局作用域，但命名函数会。

【解决方案2】：

你搞错了。 IIFE 不会影响局部变量和全局变量的工作方式。

关于全局变量和局部变量，您的两个示例之间没有区别。

两者都声明了全局变量number，并用7（在函数外）和一个也被命名为number的变量在函数内用7初始化。函数内部的变量“覆盖”了全局变量；全局变量 number 不能在函数内部使用（只需使用 number 名称），alert() 调用使用局部变量。

您可以使用这些代码变体轻松检查这一点：

var number = 7;

(function() {
  var number = 6;
  alert('local variable: ' + number);
})();
alert('global variable: ' + number);

和

var number = 7;

function num() {
  var number = 6;
  alert('local variable: ' + number);
}
num();
alert('global variable: ' + number);

上面的两个代码sn-ps的效果几乎一样。他们声明一个函数然后执行它。

唯一的区别是第二个在全局命名空间中创建了一个名为num的函数。

有时我们不想创建命名函数。例如，仅使用一次时。在这种情况下，当一个函数被声明然后只调用一次时，就会使用 IIFE。它将声明和调用打包到一个表达式中，并且不会留下不再使用的函数。

【讨论】：