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

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点