立即执行函数(Immediately Invoked Function Expression,IIFE)
在JS中，我们经常会听到一个名词“立即执行函数”，它们通常会以如下的语法形式出现：
//IIFE普通函数
(function add(x,y){
console.log(x+y)
})(1,2);
(function add(x,y){
console.log(x+y)
}(1,2));
//IIFE匿名函数
(function(x,y){
console.log(x+y)
}(1,2));
(function(x,y){
console.log(x+y)
})(1,2);
IIFE函数的定义方式，可以让函数在定义后就直接执行，我们可以看到上面的代码复制到console中后，不需要另外调用函数，就会直接打印3。
对比下普通的函数声明和调用方法
function add(x,y){
console.log(x+y)
}
add();
//如果函数声明之后直接调用，调用语句会被无视
function add(x,y){
console.log(x+y)
}(1,2);
//匿名函数赋值给变量，可以正常调用
var addFunc = function(x,y){ console.log(x+y)};
addFunc(1,2);
//如果直接声明匿名函数会直接报错
function(){ console.log('hahaha')};
function(){ console.log('hahaha')}();
//Uncaught SyntaxError: Function statements require a function name
function test(){ console.log('hahaha')}();
//Uncaught SyntaxError: Unexpected token ')'
我们可以看出，如果没有外面的()把函数体包裹起来，函数是没有办法立刻执行的，匿名函数定义都会直接报错，函数声明后面跟着调用操作也会直接报错。
其中的原因是来自于：JS对于函数声明和函数表达式语句的解析处理的方式是不同的。
函数声明(FunctionDeclaration )与函数表达式(Function Expression)
在JS中要定义一个函数，有这么几种方法：
- 函数构造函数
使用构造函数的过程，我们可以理解为是调用表达式，创建了新的对象实例，获得的sum对象刚好是个Function的实例。
var sum = new Function('a','b', 'return a + b;');
alert(sum(10, 20)); //alerts 30
- 函数声明
function sum(a, b){
return a + b;
}
alert(sum(10, 10)); //20
JS中如果形如行首以function关键字开头，且带有函数名（Identifier），则解析为是函数声明。如以下形式：
function Identifier ( FormalParameterListopt ){ FunctionBody }
所以，当我们直接定义一个匿名函数，因为也是function开发，JS会按照函数声明的标准去解析它，解析后发现它没有设置函数名，就会直接报错。
JS在解析函数声明的时候，存在变量提升的情况。
sum(1,2);//sum还未定义，也可以输出3
console.log(sum);
function sum(x,y){
console.log(x+y);
}
- 函数表达式
使用函数表达式来获得一个函数。
var sum = function(a, b) { return a + b; }
alert(sum(5, 5)); // alerts 10
var sum = function sumCopy(a, b) { return a + b; }
alert(sum(5, 5)); // alerts 10
JS中=是赋值操作符，说明该语句是一句表达式而不是声明。表达式后面跟着的函数，可以带函数名也可以不带。
函数表达式和函数声明有什么区别呢？
我们看下两段代码的对比：
- 函数声明
function sumDeclaration(a, b) {
console.log(typeof sumDeclaration);
return a + b;
}
var sum = sumDeclaration;
sum(1,2);//输出function
console.log(typeof sumDeclaration);//输出function
sumDeclaration函数声明之后，它是被挂在外层的全局变量当中的，它是属于它所在的整个上下文的，所以我们不仅可以在它的函数内部去访问到它，也可以在外层上下文访问到它。
- 普通表达式
(1+3);
var a = 1+5;
console.log(a);
(var a = 1+5);//Uncaught SyntaxError: Unexpected token 'var'
当我们在console里面直接执行表达式代码的时候，我们会发现操作符会自动执行，所以a会直接输出5。1+3输入也会去计算。
所以如果JS解析到是个表达式语句，它会去把语句中可执行的操作符执行。
我们发现，如果把带有声明的语句如var等，用()包裹起来，会直接报错。
此时JS不会把这个语句当作声明去解析，而是当作表达式来解析，表达式中又没有var的执行逻辑，就报错了。
- 函数表达式
console.log(sum);//undefined
console.log(sumCopy);//Error:sumCopy is not defined
var sum = function sumCopy(a, b) {
console.log(typeof sumCopy);
return a + b;
}
sum(1,2);//输出function
console.log(sumCopy);//Error:sumCopy is not defined
我们会发现，在定义之前我们可以访问到sum变量，因为它已经被var声明了，也存在变量提升，所以sum获取到的是undefined，但是sumCopy在第三行代码执行之前引用就会直接报错。
因为，JS解析函数表达式的时候是按照顺序在执行解析的，没有存在变量提升。
而且sumCopy这个函数没有被当成函数声明被解析，对于它的外部环境来说，它不会作为一个函数变量挂在到外部环境的词法环境里面。因为它认为你在执行一个具体的操作语句而不是声明操作。
但是function关键词会创建新的作用域，所以在sumCopy内部再访问它，会输出function，因为sumCopy在它自己新创建的作用域里面函数变量名挂在到它自己的词法作用域了。
我的理解是，当使用函数表达式的时候，可以理解为给sum这个变量赋值一个function对象。除非你引用sum这个对象，否则这个function对象，不能够被它表达式语句作用域以外的作用域去使用。
Why do you need to invoke an anonymous function on the same line?
深入理解javascript中的立即执行函数(function(){…})()
所以如果我们希望，函数定义完就执行掉，不要被外层的任何对象保存。可以怎么实现呢？
结合前面说的表达式会执行操作符和函数表达式的特点，所以在JS中，我们只要让JS在解析的时候，不要认为这是函数声明，而认为是函数表达式，并且不要把函数表达式保存下来不就可以了？
IIFE实现
我们可以借助普通表达式，把函数声明改造成函数表达式。
-function test(){console.log('test');}();
+function test(){console.log('test');}();
(function test(){console.log('test');}());
console.log(test);//Uncaught ReferenceError: test is not defined
我们发现，这三个语句都可以成功执行，而且test函数没有被外部保存下来。
所以说，关键就在于让JS认为这句代码不是个函数声明而是个表达式。
(function test(){console.log('test');})()
(functionbody)()这种形式，可以理解为()让JS认为内部是个函数表达式，所以返回了个函数对象，functionObj()就直接执行了。
[译] JavaScript：立即执行函数表达式（IIFE）
IIFE作用域问题
在ECMA文档中，当函数表达式执行的时候，我们可以看到，会把当前词法环境的变量，赋给执行上下文的词法环境。也可以解释为，它会把当前外层上下文的变量保存起来。
function expression Evaluation
function expression Evaluation
所以在这段代码当中：
for(var i = 0;i < 5; i++ ) {
(function(i){
setTimeout(function(){
console.log(i);
},1000)
})(i);
}
通过()把function(i)变成了函数表达式，调用时传入了每轮循环中的i，每轮循环中i的数值会被函数表达式保存在执行上下文的词法环境当中，所以每次执行的时候，在事件循环队列当中的每个任务，对应的词法环境都是对应的循环时的变量。
ECMA-sec-function-definitions-runtime-semantics-evaluation
What is an IIFE in JavaScript?
JS中的IIFE
JavaScript系列之立即执行函数IIFE
网友评论