Javascript预解析的理解与案例

JavaScript代码是由浏览器中的JavaScript解析器来执行的。

JavaScript解析器在运行 JavaScript代码的时候分为两步:预解析和代码执行。

 

1.js引擎运行js分为两步:预解析和代码执行

(1).预解析js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面

(2).代码执行按照代码书写的顺序从 上往下执行

 

2.预解析分为变量预解析(变量提升) 和函数预解析(函数提升)

(1)变量提升就是把所有的变量声明提升到当前的作用域最前面，但不会提升赋值操作

(2)函数提升就是把所有的函数声明提升到当前作用域的最前面，但不会调用函数  

 

以下是三个案例，需要特别注意第三个案例，这些案例是前端面试题中经常出现的

// 案例一: 
var num = 20;
fun();
function fun(){
    console.log(num);
    var num = 30;
}
//  输出结果： undefined

//  上述代码的解析过程
var num; //变量提升
function fun(){ //函数提升
    var num; //函数提升
    console.log(num);
    num  = 30;
}
num = 20;
fun();

// 案例二：
var num = 20;
function fun2(){
    console.log(num);
    var num = 30;
    console.log(num);
}
fun2();
// 输出结果：undefined 30

//  上述代码的解析过程
var num; //变量提升
function fun2(){ //函数提升
    var num;  //变量提升
    console.log(num);
    num = 30;
    console.log(num);
}
num = 20;
func2();

// 案例三:
fun3();
console.log(c); //40
console.log(b); //40
console.log(a); //Uncaught ReferenceError: a is not defined
function fun3(){
    //注意: var a = b = c = 40; 相当于 var a=40; b=40; c=40; b和c是全局变量
    var a = b = c = 40;
    console.log(a); //40
    console.log(b); //40
    console.log(c); //40
}

// 上述代码的解析过程
function fun3(){
    var a;
    a = 40; //a是局部变量，只在当前作用域有效
    b = 40;
    c = 40;
    console.log(a); 
    console.log(b);
    console.log(c);
}
fun3();
console.log(c);
console.log(b);
console.log(a);