理解立即调用函数(function(){ ...})();

首先来看一个示例：

var img = document.getElementsByTagName('img');
        for(var i = 0; i< img.length; i++){

            img[i].onmouseover = function(){
            img[i].style.width = 185 +'px';
            img[i].style.height = 215 +'px';
        }

            img[i].onmouseout = function(){
            img[i].style.width = 165 +'px';
            img[i].style.height = 200 +'px';
        }
    }

以上函数处理的事件是，当鼠标悬浮到某个图片上，该图片相应的变大一点，当鼠标移出后，恢复原来的大小。首先我们能够想到的就是获取所有的图片标签，然后再进行一个循环，为每一个图片绑定一个悬浮移出的事件。看起来是没有任何问题的，但是当真正执行起来确实漏洞百出。
for循环只是将所有的图片遍历一遍，并没有真正的为图片绑定事件。
而我们要做的就是为所有的图片进行事件绑定。
可以使用立即调用的函数表达式。
使用

        var img = document.getElementsByTagName('img');

        for(var i = 0; i< img.length; i++){

            (function(value){

            img[value].onmouseover = function(){

            img[value].style.width = 185 +'px';
            img[value].style.height = 215 +'px';
        }

            img[value].onmouseout = function(){

            img[value].style.width = 165 +'px';
            img[value].style.height = 200 +'px';
        }
        })(i);
    }

将for循环内的代码用立即调用函数包裹起来，就相当于for每次执行就会调用一次该函数，然后将i传递给value,这样可以为每一个图片都可以绑定上相应的事件了。

在理解了一些函数基本概念后，回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法，最初我以为是一个括号包裹匿名函数，并后面加个括号立即调用函数，当时不知道为什么要加括号，后来明白，要在函数体后面加括号就能立即调用，则这个函数必须是函数表达式，不能是函数声明。

所以说上面的函数还可以这样写成函数表达式的形式：

var a = function(value){

//code

}(i);
//也就相当于是
var a = function(value){

//code

}
//立即调用

a(i);
//在每一次的for循环中，执行一次事件绑定

这就是立即调用函数，即遍历每一个i时，将i传进去绑定到图片上。如果不这样为每一个图片绑定事件，利用for循环就只是相当于走了一个过程，而且这个过程是一次走完的，没有实际的动作。

立即调用函数的作用：
javascript中没用私有作用域的概念，如果在多人开发的项目上，你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉，根据javascript函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。

下面来一打实例：

复制代码：

1. function(a){
        console.log(a);   //报错,Uncaught SyntaxError: Unexpected token (
}(12);


2. (function(a){
    console.log(a);   //firebug输出123,使用（）运算符
})(123);

3. (function(a){
    console.log(a);   //firebug输出1234，使用（）运算符
}(1234));

4. !function(a){
    console.log(a);   //firebug输出12345,使用！运算符
}(12345);

5. +function(a){
    console.log(a);   //firebug输出123456,使用+运算符
}(123456);

6. -function(a){
    console.log(a);   //firebug输出1234567,使用-运算符
}(1234567);

7. var fn=function(a){
    console.log(a);   //firebug输出12345678，使用=运算符
}(12345678)           
//需要注意的是:这么写只是一个赋值语句,即把函数匿名函数function(a){...}()的返回值赋值给了fn,如果函数没有返回值,那么fn为undefined,


//下面给出2个例子,用来解答读者的疑惑:

8. var fn=function(a){
    console.log(a);   //firebug输出12345678，使用=运算符
}(12345678);
console.info(fn);//控制台显示为undefined;
fn(123);//函数未定义报错,fn is undefiend 

9. var fn=function(a){
    console.log(a);   //firebug输出12345678，使用=运算符
    return 111;
}(12345678);
console.info(fn);//会发现fn就是一个返回值111,而不是一个函数
fn(123);     //报错,因为fn不是一个函数

可以看到输出结果，在function前面加！、+、 -甚至是逗号等到都可以起到函数定义后立即执行的效果，而（）、！、+、-、=等运算符，都将函数声明转换成函数表达式，消除了javascript引擎识别函数表达式和函数声明的歧义，告诉javascript引擎这是一个函数表达式，不是函数声明，可以在后面加括号，并立即执行函数的代码。

加括号是最安全的做法，因为！、+、-等运算符还会和函数的返回值进行运算，有时造成不必要的麻烦。