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

在平时开发的过程中,我们注意到函数的定义方式远不止一种,那么不同函数定义之间它们又有什么区别呢?看到一篇博客写的很不错所以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);
        }();

作者原文链接:https://www.cnblogs.com/tu-0718/p/9584184.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值