立即执行函数的写法

发表于 | 分类于 | 阅读次数:

立即执行函数

今天无意中看到下面的立即执行函数的一种写法：

1
2
3
!function(){
// do something
}();

傻傻搞不懂的，google了一番：原因是：

“function(){}()”并不是合法的EcmaScript字符串，而“!function(){}()”是，

匿名函数附近使用括号或一些一元运算符的之后，就会告诉引擎运算符附近是一个表达式，
所以上面是跟(function(){}())的作用是一样的，只是引导JavaScript解析器，指明functiontion(){}()是函数表达式，不是函数声。在后面加括号，并立即执行函数的代码。

加括号是最安全的做法，因为！、+、-等运算符还会和函数的返回值进行运算，不建议使用这些运算符。
常见的立即执行函数有以下两种：

1
2
3
4
5
6
7
(function(){
  ...
})()
(function(){
  ...
}())

要理解立即执行函数，需要先理解一些函数的基本概念。

函数声明

使用function关键字声明一个函数，再指定一个函数名，叫函数声明。主要存在”函数声明提升”。
如：

1
2
3
function funA() {
  ...
}

函数表达式

使用function关键字声明一个函数，但未给函数命名（当然可以你可以给个名称，但是没有意义，一般省略），最后将匿名函数赋予一个变量，叫函数表达式，这是最常见的函数表达式语法形式。函数表达式必须要等到引擎执行到它所在行，才上而下一行一行地解析函数表达式。如：

1
2
3
var funA = function() {
  ...
}

匿名函数

使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数，匿名函数属于函数表达式，匿名函数有很多作用，赋予一个变量则创建函数，赋予一个事件则成为事件处理程序或创建闭包等等。如开头的理解执行函数里的函数。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
funA();
function funA(){
    ...
}//正常，因为‘提升’了函数声明，函数调用可在函数声明之前
 
funA();
var funA=function(){
    ...
}//报错，变量funA还未保存对函数的引用，函数调用必须在函数表达式之后
var funA=function(){
    ...
}();//函数表达式后面加括号，当javascript引擎解析到此处时能立即调用函数
function funA(){
    ...
}();//报错，因为这里的()是分隔符，里面有内容
function funA(){
    ...
}(1);
不会报错，相当于先声明了funA，然后再执行括号里的内容，相当于括号前面加个`;`
function(){
    ...    
}();//报语法错误，JavaScript无法正常编译。