天天看點

JS中函數常見的表現形式以及立即執行函數

  函數常見的幾種表現形式:

  1.一般形式(函數聲明):

  

JS中函數常見的表現形式以及立即執行函數

  會進行函數的預解釋,函數會進行聲明和定義,在函數體前面或則後面都可以進行調用。

  2.函數表達式(匿名函數):

  

JS中函數常見的表現形式以及立即執行函數

  會進行函數的預解析,函數會進行聲明但是不會定義(指派),隻能在函數體後面進行調用。

  3.匿名函數:

  

JS中函數常見的表現形式以及立即執行函數

  匿名函數屬于函數表達式,javascript引擎将開頭的function關鍵字當做函數聲明但未進行指派操作。

  函數聲明和函數表達式的差別:

  一:Javascript引擎在解析javascript代碼時會‘函數聲明提升'(Function declaration Hoisting)目前執行環境(作用域)上的函數聲明,而函數表達式必須等到Javascirtp引擎執行到它所在行時,從上至下解析函數表達式。

  二、函數表達式後面可以加括号立即調用該函數,函數聲明不可以,隻能以fnName()形式調用 。

JS中函數常見的表現形式以及立即執行函數

  

  了解了函數常見的幾種表現形式,我們再來看看立即執行函數兩種表現形式:( function(){…} )()和( function (){…} () ),兩種寫法是等價的。立即執行函數能做到立即執行,不存在預解析。

JS中函數常見的表現形式以及立即執行函數

  在function前面加!、+、 -甚至是逗号等到都可以起到函數定義後立即執行的效果,而()、!、+、-、=等運算符,都将函數聲明轉換成函數表達式,消除了javascript引擎識别函數表達式和函數聲明的歧義,告訴javascript引擎這是一個函數表達式,不是函數聲明,可以在後面加括号,并立即執行函數的代碼。

JS中函數常見的表現形式以及立即執行函數

  拓展:當多個立即執行函數運作過程中抛出錯誤的相關解析。

  

JS中函數常見的表現形式以及立即執行函數

  根據ECMAScript規範分号自動插入規則,可以知道第一個立即執行函數後沒有自動插入";",是以導緻最後解析出來的結果如圖所示:

JS中函數常見的表現形式以及立即執行函數

  解決辦法,在第一個立即執行函數後面加上";"。

JS中函數常見的表現形式以及立即執行函數

  優點:javascript中沒用私有作用域的概念,多人開發過程中在全局或局部作用域中聲明了一些變量,可能會被其他人不小心用同名的變量給覆寫掉,根據javascript函數作用域鍊的特性,可以使用這種技術可以模仿一個私有作用域,用匿名函數作為一個“容器”,“容器”内部可以通路外部的變量,而外部環境不能通路“容器”内部的變量,是以( function(){…} )()内部定義的變量不會和外部的變量發生沖突,俗稱“匿名包裹器”或“命名空間”。深入可以了解下閉包的相關知識點。

  舉例:JQuery使用的就是這種方法,将JQuery代碼包裹在( function (window,undefined){…jquery代碼…} (window)中,在全局作用域中調用JQuery代碼時,可以達到保護JQuery内部變量的作用。