解释javascript立即执行函数表达式IIFE

I. IIFE解释

整个拼写被称为函数表达式，这是一个要立即执行的函数表达式。

如下面的代码所示，它是一个匿名的立即执行函数：

(函数(窗口，未定义){ //代码.})(窗口)；二、括号的含义

2.1函数()周围括号的含义{}

此括号的目的是将function(){}转换为表达式。和一些库的源代码一样，我喜欢用以下方式替换：

~function(){ //代码.} ();或者这样：

Function(){ //代码.} ();其实函数也是一样的，就是把函数(){}转换成可执行的表达式，便于执行。

如果去掉括号，将会报告一个错误。因为simple function(){}不是可执行表达式，所以会直接报错。下图：

2.1第二个括号的含义

理解第一个括号的意思，第二个括号很简单，就是执行表达式。

三、参数的含义

以此代码为例解释参数

var wall={ }；(函数(window，WALL，undefined){})(window，WALL)；参数分为形式参数和实际参数。

函数的三个参数(window，wall，undefined)是形式参数，第二个括号(window，WALL)的两个参数是实际参数。

也就是可以理解为window==window，wall==WALL。

2.1常见形式参数

普通参数由窗户和墙壁等实际变量指定，可以是任何类型的变量。形式参数对应于实际参数

2.2特殊参数未定义

多写一个未定义的参数是一个有趣的话题。

可以知道，在这个例子中，只有两个实际参数和三个形式参数。因此，当函数被执行时，参数undefined将被默认分配为undefined。

未定义参数的功能如下：

2.2.1防止未定义的特殊值被恶意代码篡改。

对于IE6等版本较低的浏览器，未定义的支持被修改。该特殊值修改后，如下判断无效。

If(wall==未定义){ //code.}因此，在这里添加形式参数的目的是为了防止这种情况发生。只要在这个IIFE范围内，就可以正常获得undefined。

2.2.2压缩代码可以压缩未定义的

因为undefined是一个形式参数，所以像YUI compressor这样的代码压缩工具可以压缩其相关值并减小文件大小。

四、写作分析

4.1常见写作

var wall={ }；//声明定义命名空间墙//定义方法(函数(窗口、墙、未定义){//绑定方法saywall。对wall命名空间说出=function(){ console . log(' hello ')；};})(窗户、墙壁)；(函数(窗口、墙、未定义){//绑定whoiam wall方法。whoiam=function(){ console . log(' wall ')；};})(窗户、墙壁)；//调用wall . say()；wall . whoiam()；首先定义一个名称空间，然后向这个名称空间添加一些东西。这是最常见的写法，也是最好理解的。

缺点是必须先声明一个名称空间，然后才能执行相关的绑定代码。存在顺序加载的问题。

4.2放大模式

var wall=(函数(window，wall，undefined){ if(type of WALL==' undefined '){ WALL={ }；}//将方法say wall . say=function(){ console . log(' hello ')绑定到wall命名空间；}返回WALL//返回引用})(窗口、墙)；var wall=(函数(window，wall，undefined){ if(type of WALL==' undefined '){ WALL={ }；}//绑定whoiam wall方法。whoiam=function(){ console . log(' wall ')到wall命名空间；}返回WALL//返回引用})(窗口、墙)；//调用wall . say()；wall . whoiam()；放大模式的优点是您不必考虑代码加载的顺序。

因为js允许wall变量重复声明var，所以可以执行这段代码。

我可以把IIFE函数拆分成多个文件来加载，不会出现普通编写需要注意的问题。

注意事项：

1.对于1的标头。IIFE，首先检查命名空间是否已经实例化，如果没有，就实例化。

2.在2的末尾。IIFE，名字空间的引用应该是return，这样后续的代码就可以得到wall名字空间的最新内容。

4.3宽放大模式

(函数(window，wall，undefined){//将方法say wall . say=function(){ console . log(' hello ')绑定到wall命名空间；}})(窗口，window . wall | |(window . wall={ })；(函数(窗口、墙、未定义){//绑定whoiam wall方法。whoiam=function(){ console . log(' wall ')；}})(窗口，window . wall | |(window . wall={ })；//调用wall . say()；wall . whoiam()；宽放大模式的关键点是实际参数部分的window.wall || (window.wall={})。

使用| |运算符出错。

如果实例化了window.wall，则不会定义它。然后直接返回窗口的引用。墙，并将其分配给形式参数墙。不会执行| |运算符后面的内容。

如果window.wall尚未实例化，请实例化它。这里要注意的一点是，实例化是赋值操作，需要用圆括号包装，变成表达式执行，以免报错。

执行表达式(window.wall={})后，将返回新对象window.wall的引用。

宽放大模式的优点是可以切割成多个文件进行加载，不考虑文件加载的顺序，没有强耦合关系。

当然，如果IIFE中的方法相互参照，还是会有负载依赖的问题。这个问题可以用loader Require.js等工具解决，这里就不讨论了。

动词（verb的缩写）按子文件加载IIFE应注意的问题

；(函数(window，wall，undefined){//将方法say wall . say=function(){ console . log(' hello ')绑定到wall命名空间；}})(窗口，window . wall | |(window . wall={ })；眼尖的已经看出区别了，就是文件开始的地方，先写分号；

这样，当多个文件合并时，就不会出现由于端到端连接而导致代码混乱的问题。例如，以下情况：

//a.js文件wall.log()//b.js文件(函数(window，wall，undefined){//将方法say wall . say=function(){ console . log(' hello ')绑定到wall命名空间；}})(窗口，window . wall | |(window . wall={ })；因为a.js文件的wall.log()中分号比较少，和b.js文件合并后，js会认为‘wall . log()(.)”需要以这种方式执行，结果代码将报告一个错误。

如果你觉得不错，可以关注这个模块化系列的文章。让我跟进码字。敬请期待！

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！