js 两个小括号 ()() 的用法

JavaScript 中，考查如下代码：

(function()
{
    alert("cftea");
})();

 

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

可以把上述代码理解为：

function foo()
{
    alert(1);
}
foo();

 

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

function foo()
{
    alert("cftea");
}
foo();
 
(function()
{
    alert("cftea");
})();
 
(function()
{
    alert("cftea");
}());
 
void function()
{
    alert("cftea");
}()

 

 

 

用途

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

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

 

 例子：

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 的。如果要使用外部的成员，可使用参数的形式传入：

function Foo() {
    var a = 123;
    this.a = 456;
    (function(a) {
        alert(a); // 456
    })(this.a);
}
var f = new Foo();

 

 

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

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
})();

 

 

从上，我们可以看出，取值时、没有加 this 时：如果当前 () 中不存在同名的局部变量，则等同于加 this 处理；如果当前 () 中存在同名的局部变量，则按常规处理。

 

 

 

 

 

 

评论

4 楼 手心的水滴 2012-11-08  

function Foo() {
    (function() {
        this.b = 789;  // window.b = 789
    })();
    (function() {
        alert(this.b); // 789, window.b
        var b = 0;
        alert(b); // 0, 这样的测试也写出来了!
    })();
} 
我想问一下
黑体 部分var b = 0; 这个是window的还是局部的？
什么道理
非的this.b 才能是window的么？

3 楼 showthesunli 2012-05-12  

博主说了这么多，我来说说我的想法，不晓得对不对

总结一下，如下代码：

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 
})(); 


上面代码执行new Foo()的时候，Foo()函数里面的两个小括号是DOMWindow对象调用的，所以其中的this向DOMWindow,所以 两个小括号之中的this.b = 789 其实相当于window.b = 789


不晓得我这样说对不对

2 楼 aqbzwxd 2011-12-12  

就是这种盲目无原理依据的研究测试弄晕了我, 有必要这么做吗? 其实理解了原理就没必要搞这么多一个一个的试, 然后得出规律, ECMAScript规则都已经定义好了.
var的规则是: 使用var声明变量就是内部变量, 否则就是先调用全局变量, 不管多少层函数.
this的规则是: method函数里的this永远指向自身, 普通函数的this永远指向DOMWindow.

// 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
})();

1 楼 select*from爱 2010-08-02  

写的不错，很好的解答了我的困惑