JavaScript ---（function...）（）：2个小括号的理解

JavaScript 中，考查如下代码：

Js代码  

1. (function()  
2. {  
3.     alert("cftea");  
4. })();  

 

其实这段代码的意思就是执行这个匿名函数，弹出提示框，内容为“cftea”。

可以把上述代码理解为：

Js代码  

1. function foo()  
2. {  
3.     alert(1);  
4. }  
5. foo();  

 

其实相同的功能还有另外两种写法，我们一并列出来如下：

Js代码  

1. function foo()  
2. {  
3.     alert("cftea");  
4. }  
5. foo();  
6.    
7. (function()  
8. {  
9.     alert("cftea");  
10. })();  
11.    
12. (function()  
13. {  
14.     alert("cftea");  
15. }());  
16.    
17. void function()  
18. {  
19.     alert("cftea");  
20. }()  

 

 

 

用途

说了这么多，这东西到底有什么用呢？它可以立即执行一段代码，并把结果赋给变量；打破我们常规的先写函数，再调用的流程，简化书写。

Js代码  

1. ajax.xmlhttp = (...)();   

 

 例子：

Js代码  

1. function Foo() {  
2.     var a = 123;  
3.     this.a = 456;  
4.     (function() {  
5.         alert(a); // 123  
6.         alert(this.a); // undefined  
7.     })();  
8. }  
9. var f = new Foo();  

 

以上代码，先显示 123，再显示 undefined，说明 alert(this.a); 这句中 this 是指本 function 的，而不是其外部 function 的。如果要使用外部的成员，可使用参数的形式传入：

Js代码  

1. function Foo() {  
2.     var a = 123;  
3.     this.a = 456;  
4.     (function(a) {  
5.         alert(a); // 456  
6.     })(this.a);  
7. }  
8. var f = new Foo();  

 

 

很好理解，再看看下面的：

Js代码  

1. function Foo() {  
2.     var a = 123;  
3.     this.a = 456;  
4.     (function() {  
5.         alert(a); // 123  
6.         alert(this.a); // undefined  
7.         this.b = 789;  
8.     })();  
9.     (function() {  
10.         alert(this.b); // 789  
11.     })();  
12. }  
13. var f = new Foo();  
14. (function() {  
15.     alert(this.b); // 789  
16. })();  
17. 同样是先显示 123，然后显示 undefined，然后显示 789，最后又是一个 789。这说明用两个小括号括起来的都是位于一个执行上下文中的，不论这些代码放在哪里。  
18.   
19. 再看看：  
20.   
21. function Foo() {  
22.     (function() {  
23.         this.b = 789;  
24.     })();  
25.     (function() {  
26.         alert(this.b); // 789  
27.         var b = 0;  
28.         alert(b); // 0  
29.     })();  
30. }  
31. var f = new Foo();  
32. (function() {  
33.     alert(this.b); // 789  
34.     alert(b); // 789  
35. })();  
36. 令人意外的是，最后一个 alert(b)，结果仍然是 789。  
37.   
38. 更深入一步：  
39.   
40. function Foo() {  
41.     (function() {  
42.         this.b = 789;  
43.     })();  
44.     (function() {  
45.         alert(this.b); // 789  
46.         alert(b); // undefined  
47.         var b = 0;  
48.         alert(b); // 0  
49.     })();  
50. }  
51. var f = new Foo();  
52. (function() {  
53.     alert(this.b); // 789  
54.     alert(b); // 789  
55. })();  

var的规则是: 使用var声明变量就是内部变量； 无var声明就是全局变量，不管该function里面嵌套了多少函数。
this的规则是: 函数里的this永远指向自身, 但是函数里面有(function...)()，则双括号里面的this永远指向Window.


// GodDamnTest1
function Foo() {  
    var a = 123;  // 局部变量, 所有子函数的全局变量
    this.a = 456;  // 对象属性
    (function() {  
        alert(a); // 123, 全局
        alert(this.a); // undefined, 普通函数, this指向DOMWindow  
    })();  
}  
var f = new Foo(); 


// GodDamnTest2
function Foo() {  
    var a = 123;  
    this.a = 456;  
    (function(a) {  // 局部声明
        alert(a); // 456, 被函数局部声明的a覆盖了全局  
    })(this.a);  
}  
var f = new Foo(); 


// GodDamnTest3
function Foo() {  
    var a = 123;  
    this.a = 456;  
    (function() {  
        alert(a); // 123, 全局
        alert(this.a); // undefined, DOMWindow 
        this.b = 789;  // window.b = 789
    })();  
    (function() {  
        alert(this.b); // 789, window.b
    })();  
}  
var f = new Foo();  
(function() {  
    alert(this.b); // 789, window.b
})(); 


// GodDamnTest4
function Foo() {  
    (function() {  
        this.b = 789;  // window.b = 789
    })();  
    (function() {  
        alert(this.b); // 789, window.b
        var b = 0;  
        alert(b); // 0, 这样的测试也写出来了!
    })();  
}  
var f = new Foo();  
(function() {  
    alert(this.b); // 789, window.b
    alert(b); // 789, window.b
})();  
令人意外的是，最后一个 alert(b)，结果仍然是 789。  // no damn surprise at all!


// GodDamnTest5
function Foo() {  
    (function() {  
        this.b = 789;  // window.b = 789
    })();  
    (function() {  
        alert(this.b); // 789, window.b
        alert(b); // undefined, 全局
        var b = 0;  
        alert(b); // 0, 还有这种测试!
    })();  
}  
var f = new Foo();  
(function() {  
    alert(this.b); // 789, window.b
    alert(b); // 789, window.b
})();


  以上出之于：http://xiaolele.iteye.com/blog/682287