HTML学习 JavaScript 预解析

1. 预解析

JavaScript代码是由浏览器来执行的。JavaScript解析器在运行js代码时分为两步：预解析和执行代码。

代码示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预解析</title>
    <script>
        // 1问 num is not defined
        // console.log(num);
        // 2问 预解析提升了变量声明 但是不提升赋值操作 undefined
        // 所以代码执行顺序为 var num; console.log(num); num = 10; 所以输出为undefined
        console.log(num);
        var num = 10;
        // 3问 可以调用
        fn();//已经把函数声明提升到最前面了
        function fn() {
            console.log(11);
        }
        //4问
        //放在上面报错 所以采用函数表达式声明函数调用必须放在后面
        //执行顺序 var fun; fun(); fun赋值操作
        fun();
        var fun = function() {
            console.log(22);
        }
        //可以调用
        fun();
        //我们JS引擎运行js分为两步 预解析 和 代码执行
        //1 预解析 js引擎会把js里面所有的var 还有 function 提升到当前作用域的最前面
        //2 代码执行 按照代码书写的顺序 从上往下执行
        // 预解析还分为 变量预解析(变量提升) 和 函数预解析(函数提升)
        //变量预解析 就是把所有的变量声明提升到当前作用域的最前面 不提升赋值操作。
        //函数提升 就是把所有的函数声明提升到当前作用域的最前面 但是不调用
    </script>
</head>

面试案例

//请问输出什么
var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}

//预编译后的代码顺序为
var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();
//所以输出的是 undefined

面试案例二：

//下面输出什么
//注意 在函数内部 没有声明的直接赋值的变量也是全局变量
function f1() {
    //相当于 var a = 9; b = 9; c = 9
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);
//预解析后
function f1() {
    var a;
    a = 9;
    b = 9;
    c = 9;
    console.log(a);// 9
    console.log(b);// 9
    console.log(c);// 9
}
f1()
console.log(c);// 9
console.log(b);// 9
console.log(a);// a is not defined

 

posted @ 2020-02-29 17:30  幻影-2000  阅读(208)  评论(0)  编辑  收藏  举报