2021-05-10

关于立即执行函数的理解

上一节的立即执行函数中，其实这只是立即调执行函数的一种方法，其本质是函数表达式后面接函数执行符号，让函数立即执行。下面就从上一篇文末的两个例子来探索和总结立即执行函数的原理和写法。

立即执行函数

两个例子背后的误会

先来看看上一篇文末两个例子的面试题结果：

 

从打印结果可以看出第一个没有报错。

但是我们要注意的是，第一个看起来很像是要想立即执行函数（可能真实意图也是这样），并且没有报错，但是并不表示这个立即执行函数成功执行了，其实这个跟立即执行函数没有半点关系。另外从输出结果可以佐证，它并没有输出“立即执行1”，而是输出了6，这是为什么呢？

其实作者的本意非常的单纯，首先代码中（6）前面的代码就是一个标准的函数声明，然后就是想看看在函数声明的后面加上括号，整个函数会不会立即执行，结果却是一厢情愿。test函数没有执行，也就说明这个函数没有立即执行，这种让函数声明的方式是错误的。但为啥没有报错呢，因为这是一个美丽的误会。

回到刚刚，前面的函数声明没有问题，后面跟着的(6); 其实就是个表达式，只不过“灵活自由”的js没有强制每条语句后一定要增加分号隔开，所以写在一起也没有报错，说白了，上面这个例子在js引擎看来就是一个函数声明和一个表达式，和下图的写法是一个意思。

 

稍微改变一下例子就可以看出来，将后面括号表达式的6去掉后，就不再是表达式了，结果是语法错误，说明引擎没有把括号解释成你想要的立即执行的效果：

 

现在看第二个例子就很简单了。它也是想立即执行匿名函数，但其实本质上也是一个函数声明和一个表达式，但是很明显前面的这种函数声明是错误的，所以报错了，因为函数声明必须要函数名啊。而且即使加上了函数名，前面的函数声明没有错，后面直接跟上括号也会报错，因为这个括号加和前面的函数声明联系不上，而括号内是空的，又不是表达式，所以这对空括号完全的成了空运算符，所以报错

小结：两个例子就是一厢情愿加js的自由（不规范）造成的美丽误会。

你问我js的坑有多深，我说太平洋都很伤心。

一厢情愿产生的根源

为什么会产生在函数声明后加括号来达到立即执行函数效果的“想法”呢？先来回顾下上一篇立即执行函数以及普通函数的写法：

1 双括号形式：(function(){语句})();

2 三括号形式：((function(){语句})());

3 普通的函数声明和调用方式

 

以上可以看出，普通的函数调用就是在函数名加括号运算符，立即指向函数也是在后面加括号，只不过是在函数体后加。所以看起来似乎只要在想要执行的函数后面加括号就能起到让函数立即执行的效果。

这就是一厢情愿的根源所在。上面两个例子马上打脸了。

其实立即执行函数的本质是立即执行函数表达式。要想立即执行函数，则函数体必须是函数表达式，不能是函数声明，并且表达式后面要有括号运算符,表示调用函数。

立即执行函数有哪些写法？

基于以上讨论，立即执行函数的写法也就是将函数体转化为表达式的方法，主要有以下几种。以上面的第一个例子为例进行改造。

1 用括号运算符将函数体变化表达式，后面跟括号运算符立即执行

 

这得到了平常比较常用的写法。

2 同样用括号运算符，将整个函数声明和括号运算符变成表达式

这就得到了W3C推荐的写法。

3 其他操作符转化表达式，起到立即执行的效果

除了上面使用到的括号之外，还有！，+，-，=， && ，|| 以及逗号（,）操作符都可以讲函数体变成函数表达式。

以上是立即执行函数的一些介绍。立即执行函数的优势是可以隔离作用域，为了避免变量污染。

 

求甚解：为什么控制台console打印输出的结果后面总是会多一个undefined?