当前位置：首页 > news >正文

JS关于定义函数的区别（为啥推荐第二种方式）

news 来源：原创 2024/5/3 12:54:33

在平时开发的过程中，我们注意到函数的定义方式远不止一种，那么不同函数定义之间它们又有什么区别呢？看到一篇博客写的很不错所以Mark下来同大家分享一下！

博主看到了阮一峰大神的一篇博客，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);
        }();