JS 自执行匿名函数

jimco 2012/07/09 iife

近期看了些 bootstrap 的源码，发现些有意思的东西，拿出来分享一下。先上一段代码：

!function () {
    console.log('Hello world !');
}();

问题来了，function 之前加上 ! 是怎么个意思？你会发现这种写法在 bootstrap 的 plugin 中相当常见。

打开控制台，copy 上面的代码，执行之后返回 true，为什么会是 true 我想应该不难理解，因为这个匿名函数没有返回值，默认返回的就是 undefined ，求反的结果自然就是 true。现在我们再来试试下面的代码：

1+function () {
    console.log('Hello world !');
}();

void function () {
    console.log('Hello world !');
}();

~function () {
    console.log('Hello world !');
}();

+function () {
    console.log('Hello world !');
}();

到这儿，你肯定还会有疑问，这些个 !, void, +, -, ~ 到底有什么用处呢？再来，上代码：

(function() {
    console.log('first');
}())

(function() {
    console.log('second');
}())

// TypeError: undefined is not a function

现在，相信很多朋友就能看出问题所在了。返回的结果是 TypeError ，因为出现了 (undefined)(undefined)，这返回的结果不报错这才怪了呢！再试试这段代码：

!(function() {
    console.log('first');
}())

!(function() {
    console.log('second');
}())

// true

这就应该很容易理解了，赋值、逻辑、甚至是逗号，各种操作符都可以告诉解析器，这个不是函数声明。并且，对函数一元运算可以算得上是消除歧义最快的方式，感叹号只是其中之一。文章参考了 stack overfolw ，有兴趣的朋友可以去看看：http://stackoverflow.com/questions/8611700/how-exactly-does-function-work/ (opens new window)

# 参考资料

CoffeeScript 初体验

最前端