变量提升和函数提升的问题

2019-10-27  本文已影响0人  tency小七

关于变量提升,大家可能都听的耳朵都起茧了。但是最近的一次讨论 ,又让我有了新的认识。

先看看题:请说出1,2对应序号的结果
alert(a)    1
a();   2
function a(){
    alert(10)
} 
var a=3;

很明显由于变量提升,在执行alert(a)之前,function a和变量a已经被初始化了,所以alert(a)其实是有值的,而不是is not defined。
让我们来看看答案:

  1. f a(){alert(10)}
    关于这个答案,当时产生的第一个疑问就是,同样命名,为什么提升之后a反而是function a(){alert(10)},明明是函数a先提升的,变量a后提升的,为什么打印出来的不是undefined?曾经在网上看到这么一句话,函数优先级要高于变量优先级,相同命名,变量会被覆盖。不知道背后的逻辑究竟是怎么样的。看了https://zhuanlan.zhihu.com/p/28140450这篇文章之后恍然大悟。
    对于函数声明来讲,像如下代码

     console.log(a)
     function a(){
         console.log('helloworld')
     }
    

    创建,初始化,赋值的过程如下:

    • 找到所有用 function 声明的变量,在环境中「创建」这些变量。
    • 将这些变量「初始化」并「赋值」为 function(){ console.log(2) }。
    • 开始执行代码 fn2()
      所以,对于函数声明来讲,在代码执行之前,JS引擎就会对其进行创建,初始化,赋值
      函数表达式就只有创建和初始化过程。

    对于变量表达式/变量声明来讲,像如下代码

       console.log(a)
       var a = 2;
    
    • 找到所有用 var 声明的变量,在环境中「创建」这些变量。「创建」这些变量(即a)。
    • 将这些变量「初始化」为 undefined。所以上面打印出来的结果应该是undefined。
    • 执行代码
    • a = 2 将 a 变量「赋值」为 2
    • 也就是说 var 声明会在代码执行之前就将「创建变量,并将其初始化为 undefined」。

    这样还是解释不了我的疑惑,为什么明明是函数a先提升的,变量a后提升的,为什么打印出来的不是undefined?找了很多资料似乎也就那句话函数优先级要高于变量优先级,相同命名,变量会被覆盖理解不了啊!而且我觉得这句话有误导的嫌疑!
    上文提到过var 声明会在代码执行之前就将「创建变量,并将其初始化为 undefined」。但是,如果发现已经这个变量在前面赋值了,就不会有初始化这一步为undefined这一步,看代码:

       function a(){console.log('hello')};
       var a;
       console.log(a)//ƒ a(){console.log('hello')}
    
       function a(){console.log('hello')};
       var a = undefined;
       console.log(a)//undefined
    

    所以上述过程应该这样子的:

    进行变量提升,function a()被提升到作用域的最前面,变量a也进行提升了,但是它发现已经有a了,所以没有了初始化a为undefined这一步。所以在alert(a)的时候,依旧是 ƒ a(){alert('10')}

  2. 10 //执行了a(){alert(10)}
    不知道你看懂了吗????

条件判断下的函数提升

上面既然我们已经说到,对于函数声明(不是函数表达式哦)来讲,在代码执行之前,JS引擎就会对其进行创建,初始化,赋值。但是,遇到条件判断语句,像下面的:

(function () { 
    if (false) {
        function test() {
            console.log(2);
        }
    }
    test();
})();

在早期的浏览器中,会打印出2,因为对于函数声明来讲,在代码执行之前,JS引擎就会对其进行创建,初始化,赋值。所以就算进入条件判断语句,test()函数已经在当前作用域创建并赋值了。
但很明显,这跟我们的出发点是背离的,我们写的条件判断语句完全没有意义了!
后来浏览器为了修正这个错误,像这种情况下面的函数提升就只是 var test提升到函数作用域的顶端,本题中false所以没进入函数体,所以test()就会报错test is not a function。而不是像第一题那样,整个函数体都提到前面。
除了if,好像while,switch,for也一样。

ecma文档:http://www.ecma-international.org/ecma-262/6.0/index.html

再来做做题吧!

解释一下下面执行的结果

    (function(){
    console.log(a);
    function a(){
        console.log(a);
    }
    var a = 1;
    })() //ƒ a(){console.log(a);}

你看懂了吗??

上一篇下一篇

猜你喜欢

热点阅读