声明及赋值_JavaScript-预解析和声明提升

好好学习，天天向上

一、预解析

• JavaScript 代码的执行是由浏览器中的 JavaScript 解析器来执行的，JavaScript 解析器执行
• JavaScript 代码的时候，分为两个过程：
  • 1.预解析过程：
    • 1. 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值
    • 2. 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用
    • 3. 先提升 var，再提升 function
  • 2.代码执行过程：
    • 在预解析之后，根据新的代码顺序，从上往下按照既定规律执行 js 代码

二、声明提升

1、变量声明提升

• 在预解析过程中，所有定义的变量，都会将声明的过程提升到所在的作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的声明变量过程
• 提升过程中，只提升声明过程，不提升变量赋值，相当于变量定义未赋值，变量内存储 undefined 值
• 因此，在 js 中会出现一种现象，在前面调用后定义的变量，不会报错，只会使用 undefined 值

<script>
    // 预解析，把变量声明部分提升到了作用域最顶部
    var a; // 相当于存了一个 undefined的值
    // 调用一个变量
    console.log(a); // undefined
    // 后定义的变量
    // var a = 1;
    a = 1
</script>

2、函数声明提升

• 在预解析过程中，所有定义的函数，都会将声明的过程提升到所在的作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的函数声明过程
• 在预解析之后的代码执行过程中，函数定义过程已经在最开始就会执行，一旦函数定义成功，后续就可以直接调用函数
• 因此，在 js 中会出现一种现象，在前面调用后定义的函数，不会报错，而且能正常执行函数内部的代码

<script>
    // 预解析，把函数声明部分提升到了作用域最顶部

    // 先调用函数
    fun(); // 2
    function fun (){
        console.log(2);
    }
    fun(); // 2
</script>

提升顺序

• 预解析过程中，先提升 var 变量声明，再提升 function 函数声明
• 假设出现变量名和函数名相同，那么后提升的函数名标识符会覆盖先提升的变量名，那么在后续代码中出现调用标识符时，内部是函数的定义过程，而不是 undefined
• 如果调用标识符的过程在源代码函数和变量定义后面，相当于函数名覆盖了一次变量名， 结果在执行到变量赋值时，又被新值覆盖了函数的值，那么在后面再次调用标识符，用的就是变量存的新值
• 建议：不要书写相同的标识符给变量名或函数名，避免出现覆盖

<script>
    console.log(fun);
    var fun = "hah";
    fun(); 
    function fun (){
        console.log(1);
    }
    fun();

    // ↑ 在预解析中 相当于 ↓

    var fun;
    console.log(fun);
    function fun (){
        console.log(1);
    }
    fun = "hah";
    fun();
    fun();
</script>

函数表达式的提升

• 在预解析过程中，函数表达式进行的是变量声明提升，而不是函数声明提升。提升后变量内部存的是一个 undefined。在前面进行函数方法调用，数据类型会提示错误
• 建议：定义函数时，最好使用 function 关键字定义方式，这样函数声明提升可以永远生效

<script>
    console.log(foo); // undefined
    foo(); // 报错
    // 函数表达式进行的是变量声明提升
    var foo = function (){
        console.log(1);
    };
</script>

函数声明提升的应用：

• 函数声明提升可以用于调整代码的顺序，将大段的定义过程放到代码最后，但是不影响代码执行效果