它只是一个匿名函数，在创建后立即执行。

这就像你把它赋值给一个变量，然后在后面使用它，只是没有变量:

var f = function () {
};
f();

在jQuery中，有一个类似的构造，你可能会想到:

$(function(){
});

这是绑定就绪事件的简写形式:

$(document).ready(function(){
});

但是上面的两个结构都不是iife。

TL;DR:表达式可以括在圆括号中，如果函数的表达式和块形式组合在一起，则会与函数调用冲突。

我喜欢反例，因为它们描绘了一幅伟大的逻辑图景，而其他人没有列出任何反例。你可能会问，“为什么浏览器不能看到function(){}()，而只是假设它是一个表达式?”让我们用三个例子来比较这个问题。

var x; //这里fibonacci是一个block函数 函数fibonacci(x) { Var值= x < 2 ?X: fibonacci(X -1) + fibonacci(X -2); if (x === 9) console.log("The " + x + "th fibonacci is: " + value); 返回值; ｝ (x = 9); console.log(" x的值:" + x); Console.log ("fibonacci is a(n) ")+ typeof fibonacci);

当我们将函数转换为表达式时，观察事情是如何变化的。

var x; //这里fibonacci是一个函数表达式 函数fibonacci(x) { Var值= x < 2 ?X: fibonacci(X -1) + fibonacci(X -2); if (x === 9) console.log("The " + x + "th fibonacci is: " + value); 返回值; }) (x = 9); console.log(" x的值:" + x); Console.log ("fibonacci is a(n) ")+ typeof fibonacci);

当你使用not-operator而不是圆括号时，也会发生同样的事情，因为这两个操作符都将语句转换为表达式:

var x; //这里fibonacci是一个函数表达式 ！ 函数fibonacci(x) { Var值= x < 2 ?X: fibonacci(X -1) + fibonacci(X -2); if (x === 9) console.log("The " + x + "th fibonacci is: " + value); 返回值; ｝ (x = 9); console.log(" x的值:" + x); Console.log ("fibonacci is a(n) ")+ typeof fibonacci);

通过将函数转换为表达式，它由它下面的两行(x = 9)执行。由于表达式函数和块函数的行为是分开的，所以这两个例子都运行得很好，没有歧义(规范方面)。

名字的作用域

另一个重要的观察是，命名块函数对整个作用域可见，而函数表达式只对其本身可见。换句话说，fibonacci只对第一个示例中的最后一个console.log是块时可见。在这三个例子中，fibonacci对自身是可见的，允许fibonacci调用自身，这是递归。

箭头功能

逻辑的另一个方面是箭头函数。如果块函数和表达式函数的定义合并在一起，规范将不得不包括箭头函数的任意规则和例外:

函数hello() {console.log(" hello World")} (x) => console.log("hello " + x) console.log("如果你正在阅读，没有发生错误");

虽然函数块工作正常，但函数表达式后面跟着箭头函数会产生语法错误:

！ 函数hello() {console.log(" hello World")} (x) => console.log("hello " + x) console.log("如果你正在阅读，没有发生错误");

这里，第二行的(x)是调用前一行的函数还是箭头函数的函数参数是不明确的。

请注意，箭头函数多年来确实符合ECMAScript标准，在语言的初始设计中并不是一个因素;我的观点是，表达式函数和块函数之间的区别有助于JavaScript语法更有逻辑性和连贯性。

它只是一个匿名函数，在创建后立即执行。

这就像你把它赋值给一个变量，然后在后面使用它，只是没有变量:

var f = function () {
};
f();

在jQuery中，有一个类似的构造，你可能会想到:

$(function(){
});

这是绑定就绪事件的简写形式:

$(document).ready(function(){
});

但是上面的两个结构都不是iife。

这是一个自调用匿名函数。

查看W3Schools对自调用函数的解释。

函数表达式可以“自调用”。 自动调用(启动)自调用表达式，无需 被称为。 函数表达式将自动执行 后面跟着()。 不能自调用函数声明。

从这里开始:

var b = 'bee';
console.log(b);  // global

把它放在一个函数中，它就不再是全局的了——这是你的主要目标。

function a() {
  var b = 'bee';
  console.log(b);
}
a();
console.log(b);  // ReferenceError: b is not defined -- *as desired*

立即调用函数——哎呀:

function a() {
  var b = 'bee';
  console.log(b);
}();             // SyntaxError: Expected () to start arrow function, but got ';' instead of '=>'

使用括号来避免语法错误:

(function a() {
  var b = 'bee';
  console.log(b);
})(); // OK now

你可以省略函数名:

(function () {    // no name required
  var b = 'bee';
  console.log(b);
})();

不需要比这更复杂了。

这是一个更深入的解释，为什么你会使用这个:

“使用IIFE的主要原因是确保数据隐私。因为JavaScript的var将变量限定在包含变量的函数内，所以任何在IIFE中声明的变量都不能被外部世界访问。”

http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html