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);
        }();