IIFE（立即调用函数表达式，自执行匿名函数)

[weishengyang]

IIFE（立即调用函数表达式，自执行匿名函数)

IIFE（Imdiately Invoked Function Expression 立即执行的函数表达式）顾名思义声明立即调用执行这个函数，立即调用的函数表达式可用于避免块内的变量提升，防止污染全局环境，同时允许公共访问方法，同时保留函数中定义的变量的隐私。这个概念被称为自执行匿名函数，不久就将IIFE这个术语作为一个更具语义准确性的术语。

• 函数表达式与函数声明的区别
• IIFE形式的函数调用
• IIFE的常见形式
• 立即调用函数表达式的作用与优点

---

函数表达式与函数声明的区别

函数表达式：

 var pro = function(){
		 console.log("test");
	 };

函数声明：

 function pro() {
		 console.log("test");
	 };

函数表达式可以声明函数名，也可以为匿名函数，但匿名函数不能直接被调用，直接调用的话就会在运行时报错，系统就会将匿名函数表达式解释为匿名函数声明；

声明函数名的函数表达式调用无错，如下：

 var pro = function(){
		 console.log("test");
	 };
pro();

匿名函数调用时，如下：

//无函数名声明后调用报错
function(){
		 console.log("test");
	 }();//会报错，系统解释为匿名函数声明
	 
//加上函数名声明后调用时（）里面没有值 
function por(){
		 console.log("test");
	 }();//相当于声明了一个函数，然后在调用它，但是（）里面的值为空还是会报错

---

IIFE形式的函数调用

JS将function当作一个函数声明的开始，而函数声明后面不能跟圆括号直接进行调用，所以有的时候想办法将函数声明转化为函数表达式。

IIFE 时的函数声明和函数调用：

函数的声明中，我们首先看到的是function关键字，JS编译器认为这是一个函数声明，为了解决上诉问题，使用一对（）将函数的声明括起来，使得JS编译器不再认为这是一个函数声明，而是一个IIFE。

代码实现如下:

(function () {
			console.log("test");
		})();

---

##IIFE的常见形式
根据括号的位置不同IIFE的常见写法有两种：

• IIFE写法一

(function(){})();

• IIFE写法二

(function(){}());

两种的写法效果是一样的，一般写法一比较常见，根据自己平时的写法习惯来选择，除此之外还有其他几种写法可以调用IIFE，如下：

+function(){}();

-function(){}();

!function(){}();

~function(){}();

void  function(){}();

---

###立即调用函数表达式的作用与优点
可以立即调用一个函数，避免块内的变量提升，防止污染全局环境，同时允许公共访问方法，同时保留函数中定义的变量的隐私。

IIFE的作用:

由上面可IIFE可以立即调用一个函数，但功能不局限于此，他可以弥补 JS 只有全局作用域和函数作用域 的这个缺陷。在ES6中才出现了块级作用域 ，由于JS对于作用域的控制只有通过function来实现，通过函数来实现变量的隔离，但是对于函数我们通常是为了实现代码的复用，JS作用域控制手段通过函数，我们会经常看到只使用一次的函数，对于很多只执行一次的函数，我们干脆不用给他函数名，直接声明进行调用。

IIFE的优点

提升性能---减少作用域查找
使用IIFE的一个微小的性能优势是通过匿名函数的参数传递常用全局对象window、document、jQuery，在作用域内引用这些全局对象。JavaScript解释器首先在作用域内查找属性，然后一直沿着链向上查找，直到全局范围。将全局对象放在IIFE作用域内提升js解释器的查找速度和性能。

有利于压缩---有利于压缩
另一个微小的优势是有利于代码压缩。既然通过参数传递了这些全局对象，压缩的时候可以将这些全局对象匿名为一个字符的变量名（只要这个字符没有被其他变量使用过）。

避免冲突---避免全局命名冲突
当使用jQuery的时候，全局的window.jQuery对象作为一个参数传递给在匿名函数内部你再也不需要担心和其他库或者模板申明冲突。

依赖加载---通过传参的方式
可以灵活的加载第三方插件。