JavaScript 预解析机制

首先我们来看一段代码:

    <script>
        console.log(a);
        var a = 10;  
    </script>

此时运行结果为 :
                在这里插入图片描述
为什么会显示undefined呢?这就涉及到了预解析中的变量提升:

1、局部提升(变量)

       会把变量声明分成两部分
       1) 变量声明 只有这个部分发生了提升,提升至所在作用域的最前面
       2) 变量赋值 在原位置;
               在这里插入图片描述


接下来再看一段代码:
    <script>
        foo();
        function foo(){
            console.log("hello world");
        }
    </script>

此时运行结果为:
                在这里插入图片描述
我们会发现,声明式的函数,调用在声明之前也是可以访问的。这是因为预解析总的函数提升:

2、整体提升(函数)

       整个函数都提升到作用域的最前面
           在这里插入图片描述


了解了变量提升和函数提升,那么我们来想一下两者谁的优先级更高?
    <script>
        console.log(foo);
        var foo = 10;
        function foo(){}
    </script>

显示结果为:
               在这里插入图片描述 结果得到函数而不是变量;
也就是说:函数将变量声明覆盖,说明是先变量提升之后,函数再提升上去将其覆盖。所以,变量提升的优先级高


总结:
JS预解析机制   有如下操作:
  1. 检查你的所有代码有没有语法错误。如果有语法错误,直接终止程序;
  2. 声明提升:把所有需要和内存交互的行为提前,将所有的内存操作集中在一起提升代码效率。分为局部提升和整体提升2种方式。
                      并且,声明提升中,局部优先提升,然后整体提升。

声明提升也解释了为什么赋值式的函数 调用在声明前会报错:
		// 2.报错  类型错误
        foo();
        var foo = function(){
            console.log("hello");
        }
        // 可以调用
        // foo(); 

        在这里插入图片描述
因为此时为局部提升,先只在内存中定义了 var foo,此时它仍为undefined


以下是一个相关例子
    <script>
        foo();
        console.log(b); //可以打印,因为b作用域为全局作用域window
        console.log(c);
        console.log(a); //不可访问

        function foo(){
            var a = 10; //局部变量, var a 解析到函数(作用域)最前面
            b = c = 7; //变量没有声明,直接赋值变为伪全局变量
            console.log(a);
            console.log(b);
            console.log(c);
        }
    </script>

             在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值