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

JavaScript 中，考查如下代码：

Js代码  



(function()  

{  

    alert("cftea");  

})();  

 

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

可以把上述代码理解为：

Js代码  



function foo()  

{  

    alert(1);  

}  

foo();  

 

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

Js代码  



function foo()  

{  

    alert("cftea");  

}  

foo();  

   

(function()  

{  

    alert("cftea");  

})();  

   

(function()  

{  

    alert("cftea");  

}());  

   

void function()  

{  

    alert("cftea");  

}()  

 

 

 

用途

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

Js代码  



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

 

 例子：

Js代码  



function Foo() {  

    var a = 123;  

    this.a = 456;  

    (function() {  

        alert(a); // 123  

        alert(this.a); // undefined  

    })();  

}  

var f = new Foo();  

 

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

Js代码  



function Foo() {  

    var a = 123;  

    this.a = 456;  

    (function(a) {  

        alert(a); // 456  

    })(this.a);  

}  

var f = new Foo();  

 

 

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

Js代码  



function Foo() {  

    var a = 123;  

    this.a = 456;  

    (function() {  

        alert(a); // 123  

        alert(this.a); // undefined  

        this.b = 789;  

    })();  

    (function() {  

        alert(this.b); // 789  

    })();  

}  

var f = new Foo();  

(function() {  

    alert(this.b); // 789  

})();  

同样是先显示 123，然后显示 undefined，然后显示 789，最后又是一个 789。这说明用两个小括号括起来的都是位于一个执行上下文中的，不论这些代码放在哪里。  

  

再看看：  

  

function Foo() {  

    (function() {  

        this.b = 789;  

    })();  

    (function() {  

        alert(this.b); // 789  

        var b = 0;  

        alert(b); // 0  

    })();  

}  

var f = new Foo();  

(function() {  

    alert(this.b); // 789  

    alert(b); // 789  

})();  

令人意外的是，最后一个 alert(b)，结果仍然是 789。  

  

更深入一步：  

  

function Foo() {  

    (function() {  

        this.b = 789;  

    })();  

    (function() {  

        alert(this.b); // 789  

        alert(b); // undefined  

        var b = 0;  

        alert(b); // 0  

    })();  

}  

var f = new Foo();  

(function() {  

    alert(this.b); // 789  

    alert(b); // 789  

})();  

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