闲着无聊想去看看 Twitter 的 Bootstrap: https://github.com/twitter/bootstrap

翻看他们的 js ,发现他们代码中有很多类似于如下的情形:


!function ($) {
    //do sth
}(window.jQuery);

很奇怪的发现他们在 function 前面加上了感叹号,但往下看到结尾部分的代码 (window.jQuery) 似乎明白了点什么,于是去 stackoverflow 上搜了下。

果然有很多人提过这个问题,这里放出一个: What does the exclamation mark do before the function?

正如之前所想,其加上了 ! 的作用,即将前面的匿名函数

function ($) {} 这是一个函数的声明,当我们需要让它立即执行,就需要使用 () 操作符将函数调用,而 () 操作符需要前面是一个表达式,通常,我们会使用一对圆括号将匿名函数声明转换成表达式。所以,我们通常是这么写的:

(function () {}) ()

那么,其实,最后的括号是用来执行函数的,我们只要保证它前面是个结果是个函数的表达式就可以了。那么,其实, js 中很多操作符,我们都可以使用,如 JavaScript 秘密花园 中所说,我们可以写成这个样子:

+function(){}();
(function(){}());

当然,理论上也是可以这么写的:

-function(){}();
~function(){}();

至于为什么可以这么做呢,那是因为 () 操作符比 ! 操作符的优先级要高两级,参见 MDN

所以如果是这么一段代码:

!function () {
    return false;
} ()

执行过程便是,函数返回 false 然后取反,变为 true 。

那么,问题又来了,我们该选哪种写法呢? 为什么用 ! 不用 + 呢?
看到 葵中剑 跑过测试,我也去跑了几次,但是结果参差不齐,不知道有没有参考意义。

不过,从感官上来说, ! 相比 (...) 不仅减少了一个字符(当然这个效果应该不明显),而且使得代码更加易读,手头没有智能点的编辑器的话,也不用费劲去找括号的对应了,再书写代码时候,一个 ! 总比 (...) 出错的概率小了