JS定義函數的2種方式以及區別簡述（爲何推薦第二種方式）

 

　　 無心中看到了阮一峯大神多年前的一篇博客： 12種不宜使用的Javascript語法   

　　看到第9條的時候受到了啓發，感受以前沒怎麼理解清楚的一些問題好像忽然變得清晰了，以下圖

　　

 

　　 可能光這樣看，有些小夥伴會有些矇蔽，不知道到底有什麼區別？　　下面我就用本身的理解來描述一下，能力有限，見諒

　　請你們先看下面的代碼：

　　　　<script>
            y();

            function y() {
                alert(2);
            };

            x();
            var x = function() {
                alert(1);
            };
        </script>

　　

　　 上面的代碼運行之後，會先執行y()方法，並彈出2；而後在執行x()方法，但這裏會報錯：x is not a function

　　爲何會是這樣的呢？ 這就是函數定義2種方法的不一樣形成的。

 

　　　上述y()，也就是定義函數的第一種方法 （官方稱爲-聲明式定義函數）

　　　你們知道JS變量是有變量聲明提早的，其實函數也是有函數名聲明提早的。

　　 （另外，函數內部用var聲明的局部變量也會把聲明提早到函數代碼頂部）

　　　瀏覽器是從上到下開始解析，但因函數名聲明提早（當沒有解析到該方法代碼以前，會自動提高到代碼頂部，固能全局調用該方法）

　　　儘管這個時候尚未解析到y()方法的代碼，依然能夠先調用該方法。因此y()方法會順利執行，也不會報錯。

 

　　　上述x()，也就是定義函數的第二種方法（官方稱爲-函數表達式）：

　　　而x()方法則會報錯提示：x is not a function， 由於第二種函數定義的寫法，不會讓函數名聲明提早。

　　　因此，瀏覽器從上往下執行，要先執行x()方法的代碼，而後才能調用，好比下面這樣就不會報錯

　　　　　　

　　　　var x = function() { alert(1); };
　　　　x();

　　 推薦第二種方式定義函數 

　　 注：函數表達式須要在語句的結尾加上分號，表示語句結束。而聲明式定義函數在結尾的大括號後面不用加分號

 

 　　補充：還有一種函數寫法，官方稱爲（當即執行函數）；

　　 有 3 種 寫法（推薦第一或第二種）：

　　　　　(function(){
            alert(1);
        })();
        
        (function(){
            alert(2);
        }());
        
        !function(){
            alert(3);
        }();