Javascript中的函數聲明和函數表達式

Javascript有很多有趣的用法，在Google Code Search裏能找到不少，舉一個例子：

 

<script>
~function() {
    alert("hello, world.");
}();
</script>

試一下就知道這段代碼的意思就是聲明一個函數，然後立刻執行，因爲Javascript中的變量作用域是基於函數的，所以這樣可以避免變量污染，但這裏的位運算符“~”乍一看讓人摸不到頭腦，如果去掉它再運行則會報錯：SyntaxError。

在闡述爲什麼之前，讓我們先來明確Javascript中的兩個概念：函數聲明和函數表達式：

先來看看什麼樣的是函數聲明：

 

<script>
function() {
    alert("hello, world.");
};

function foo() {
    alert("hello, world.");
};
</script>

再來看看什麼樣的是函數表達式：

 

<script>
var foo = function() {
    alert("hello, world.");
};
</script>

現在回頭看看文章開頭的問題，爲什麼去掉位操作符“~”後運行會報錯，這是因爲從語法解析的角度看，Javascript不允許在函數聲明的後面直 接使用小括號，而函數表達式則沒有這個限制，通過在函數聲明前面加上一個“~”操作符，就可以讓語法解析器把後面看成是函數表達式，同樣的，在函數聲明前 面加上“!，+，-”等操作符也是可行的。

那我們爲什麼不使用下面這種函數表達式的方式呢？

 

<script>
var foo = function() {
    alert("hello, world.");
}();
</script>

雖然從語法解析的角度看沒有問題，但是上面的代碼存在弊端，它引入了一個變量，可能會污染現有的運行環境，帶來潛在的問題。

使用位操作符“~”的方法多少顯得有點奇技淫巧，其實把函數聲明用小括號套起來更易讀：

 

<script>
(function() {
    alert("hello, world.");
})();
</script>

弄明白了原理，不管遇到什麼寫法，都不會再丈二和尚摸不着頭腦了。