无意中看到了阮一峰大神多年前的一篇博客: 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);
        }();