简单谈一谈JavaScript中的变量提升的问题

时间:2021-11-07 15:56:42

1,随笔由来

  第一天开通博客,用于监督自己学习以及分享一点点浅见,不出意外的话,应该是一周一更或者一周两更。

   此博客所写内容主要为前端工作中遇上的一些问题以及常见问题,在此基础上略微发表自己的一点浅见,如有出现错误,请看到的各位能够不吝赐教,此致谢意。

  前几天在某技术群中水的正欢,忽然有群友提出了一个问题,虽然不难,卻是常人忽视的点,且出现次数较多,所以在此写一点东西,提醒一下自己。

2,JavaScript中的var 与 function 

  首先我们来看下面这个demo

    var f = function(){

      console.log('1');

    };

    function f(){

      console.log('2');

    };

    f();//1

  看到这里的时候,有人可能会问为什么,不是应该输出2吗?

  这里要说到一个优先级问题,javascript(es5)中,var 和 function 定义的变量是要上升的,也就是说,var跟function定义变量的这个过程,是要放到该作用域的最上方,并且var优先于function。

  为了证实 var 与 function 的优先级,我们可以测试4段简单的代码:

    //第一段

    var e;

    function e(){};

    console.log(typeof e);//function

    //第二段

     function e(){};

     var e;

     console.log(typeof e);//function

     //第三段

     var e;

     console.log(typeof e);//undefined

     //第四段

     function e(){};

     console.log(typeof e);//function

 

 

 

   到这的时候,有人可能要提出疑问了,为什么,var在前,function在后,我们第一段代码输出的却是1而不是2呢?不是应该被function覆盖掉吗?

 这里要解释一下,var的提升,只负责提升定义的那一个行为。我们来解读一下 var one = ‘1’,这里应该是2个行为 var one;one=1;

 所以,我们上面的代码实际上是这个样子:

    var f;

    function f(){

      console.log('2');

    };

    f = function(){

      console.log('1');

    };

    f();//1

 这里f指向一个匿名函数,function(){console.log('1');};覆盖了之前的定义。

 JavaScript中变量的定义,大抵可参考上面的顺序,不过在此作者还是建议大家按照顺序去定义变量,并且按照此作用域中 var > function > 赋值 的顺序以便阅读。

 最后感谢屏幕前的你花了宝贵的时间来看这点小东西。