匿名函式function前面的! ~等符號作用

相信作為前端，很多同學應該都見過類似於:

!function() {do something...}()
~function(){do something...}()

等這樣的匿名函式寫法！

當然對於老同志來說，肯定是明白這樣寫法的作用了，但是對於新手來說可能會有一定的困擾，這裡就簡單給大家分享一下關於這種寫法的作用，以及原理！

眾所周知，在js中可以這樣建立一個匿名函式：

(function(){do something...})()
//或
(function(){do something...}())

而匿名函式後面的小括號()是為了讓匿名函式立即執行，其實就是一個函式呼叫，相信大家都懂的！

那大家有沒有想過為什麼這麼寫就會報錯了：

function(){alert(1)}()

其實很簡單，因為function前面沒有(或者! ~之類的運算子，js解析器會試圖將關鍵字function解析成函式宣告語句，而不是函式定義表示式！

作為組運算子，小括號()會將其內部的表示式當成一個整體，然後返回結果，所以定義一個匿名函式正確的格式就是用小括號將函式體括起來！

同樣的! ~ + -等運算子也有同樣的效果，這是因為匿名函式也是一種值，這些運算子會將後面的函式體當成一個整體，先對匿名函式進行求值，然後在對結果進行運算！

不過這些運算子雖然能夠達到讓匿名函式立即執行的目的，但是要小心他們是有副作用的，比如：

!function() {return 1}()//false
~function() {return 1}()//-2
-function() {return false}()//0

沒錯，他們會對函式的返回值進行運算，這樣可能會導致最終的結果和你想要的結果不一樣！當然，對於那些沒有返回值的函式來說，當然是沒有什麼影響了！

既然上面都說了可能會有副作用，那為什麼還有這麼多人用了？

其實答案很簡單，無外乎兩點：

1.讓程式碼看起來不容易懂，說白了就是裝_比

2.少寫一個），偷懶唄！

當然一般這麼用的時候都是函式本身沒有返回值的情況！（還有可能會有一些特殊的需求啦），為了程式碼可讀性，本人建議還是按照正規的方式使用匿名函式，沒有特殊需求的情況下儘量不用這些運算子代替小括號！