(function(){...})() 与 (function(){...}())

JS中函数有两种命名方式

1、一种是声明式。

而声明式会导致函数提升，function会被解释器优先编译。即我们用声明式写函数，可以在任何区域声明，不会影响我们调用。

function XXX(){}
 
 
1
 
 
1

2、一种是函数表达式

函数表达式我们经常使用，而函数表达式中的function则不会出现函数提升。而是JS解释器逐行解释，到了这一句才会解释。因此如果调用在函数表达式之前，则会调用失败。

var k = function(){}
 
 
1
 
 
1

fn1();
function fn1(){}//可以正常调用

fn2();
var fn2 = function(){}//无法调用
 
 
1
2
3
4
5
 
 
1
2
3
4
5

OK，下面进入正题，对函数表达式加上()，是可以直接调用的 
但是如果是对声明式的后部加上()则是会被编译器忽略。

 var fn2 = function(){}();//对，就是这样
function fn1(){}();//会被忽略
 
 
1
2
 
 
1
2

而平常的function(){}则是一种声明式，如果加上()括号后，则会被编译器认为是函数表达式，（加上+-号都可以），从而可以用()来直接调用

（function fn1(){}）();

二
function foo() {...}     // 这是定义，Declaration；定义只是让解释器知道其存在，但是不会运行。

foo();                   // 这是语句，Statement；解释器遇到语句是会运行它的。


IIFE 并非必须，传统一点可以这么写：
function foo() {...}
foo();


那么为什么要 IIFE？

 
 
传统的方法啰嗦，定义和执行分开写；
传统的方法直接污染全局命名空间（浏览器里的 global 对象，如 window）

于是，开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢？
function foo(...){}();


当然是不能，但是为什么呢？因为 function foo(...){} 这个部分只是一个声明，对于解释器来说，就好像你写了一个字符串 "function
 foo(...){}"，它需要使用解析函数，比如 eval() 来执行它才可以。所以把 () 直接放在声明后面是不会执行，这是错误的语法。

如何把它变得正确？说起来也简单，只要把 声明 变成 表达式（Expression） 就可以了。

实际上转变表达式的办法还是很多的，最常见的办法是把函数声明用一对 () 包裹起来，于是就变成了：
(function foo() {...})    // 这里是故意换行，实际上可以和下面的括号连起来
();


这就等价于：
var foo = function () {...};    // 这就不是定义，而是表达式了。
foo();


但是之前我们说不行的那个写法，其实也可以直接用括号包起来，这也是一种等价的表达式：
(function foo(){...}());


所以你问有没有区别？很简单：木有～

另外，刚才说过转变表达式的方式很多，的确还有很多别的写法，比如：
!function foo() {...}();


或者
+function foo() {...}();


这些都可以。

我个人挺偏爱用 void 来转变表达式，因为此关键字不会有返回值。不过这一点真的没有什么要紧的，就当我“龟毛”好了……
void function () {
    // 这里是真正需要的代码
}();


OK，所谓不去污染全局命名空间，是因为 IIFE 创建了一个新的函数作用域，你真正的业务代码被封装在其中，自然就不会触碰到全局对象了。如果你需要全局对象，那就 pass 给 IIFE：

 
 


  
  


   
   
   
   
   
   
  
  

 
 
void function (global) {
    // 在这里，global 就是全局对象了
}(this)    // 在浏览器里，this 就是 window 对象