JavaScript立即调用的函数表达式

主要参考知乎上这个问题：javascript 匿名函数有哪几种执行方式  长天之云的回答。

~(function() {

    //todo

})();



!(function() {

    //todo

})();

对于不太熟悉JavaScript的同学来讲，可能会有两个疑问：

1、!(function() {})();前面为什么要加~、!这些符号？

后面的()是执行一个函数，而(function() {})是一个执行表达式，返回一个匿名函数的引用。

而如果在(function() {})();之前包含“未结束”的语句。是的，语句…

一条语句由一个或多个表达式、关键字或者运算符（符号）组成，典型地，一条语句写一行，尽管一条语句可以超过两行或者更多行，两条或更多条语句可以写在同一行上，语句之间用分号“；”分开。

<script type="text/javascript">
    
function f() {
    alert(1);
}

f

();

</script>

f 与函数调用符()中间隔一行或者多行，都可以执行。就像定义函数的参数可以换行一样。

而下面的代码：

<script type="text/javascript">
(1+1)    

(function f() {
    alert(1);
})();

</script>

 

就会提示缺少函数，因为(1+1)这里的()是执行一个表达式，而(function f() {})这里的()却是一个函数调用符。所以就报错了…

 

所以一般会在代码前面加一个一元运算符（当然也可以使用；）进行分隔，而使用什么样的运算符，与习惯有关。

 

也有文章指出，使用什么符号与运算符的效率有关，详见：function与感叹号>>

 

 

2、既然前面的一元运算符或者；不能被省略，那么(function() {})这个()能不能省呢？

 

如果是;function() {}()就不行了，会报语法错误，其它一元运算符可以，但是仍然建议加上()。

 

 

 

立即调用函数表达式，有很多种方式，例如：

( function() {}() );
( function() {} )();
[ function() {}() ];

~ function() {}();
! function() {}();
+ function() {}();
- function() {}();

delete function() {}();
typeof function() {}();
void function() {}();
new function() {}();
new function() {};

var f = function() {}();

1, function() {}();
1 ^ function() {}();
1 > function() {}();
// ...

 

参考：

Immediately-Invoked Function Expression (IIFE)

function与感叹号

ECMA-262-3 in detail. Chapter 5. Functions. - Dmitry A. Soshnikov
Functions and function scope - Mozilla Developer Network
Named function expressions - Juriy “kangax” Zaytsev
JavaScript Module Pattern: In-Depth - Ben Cherry
Closures explained with JavaScript - Nick Morgan