JavaScript预解析

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

在学习JavaScript时，我们可能会认为代码一定是逐行解释的，但实则不然，此文便是谈论JavaScript的解析机制。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、预解析

预者，提前也。预解析就是提前解析之意。


JavaScript引擎运行js分为两步：其一为预解析，其二为代码执行。
预解析：js引擎会把js里面所有的var和function提升到当前作用域的最前面；
代码执行：按照代码书写的顺序从上往下执行。


预解析分为：变量预解析（变量提升）和函数预解析（函数提升）。
变量提升（变量预解析）：把所有的变量声明提升到当前的作用域最前面，不提升赋值操作；
函数提升（函数预解析）：把所有的函数声明提升到当前作用域的最前面，不调用函数。

二、案例学习

1.几个简单的案例

代码如下（示例）：

console.log(num);           //  undefined       （输出结果）
var num = 8;    
     // 等价于
    // var num;            // 把变量声明提升到当前的作用域最前面
    // console.log(num);   // undefined
    // num = 8;            // 将8赋值给num

 console.log(fn);            // undefined        (输出结果)
 var fn = function() {
 alert('I am a pig!!!');
 }
    // 等价于
    // var fn;                       // 把变量声明提升到当前的作用域最前面
    // console.log(fn);              // undefined
    // fn = function() {             // 将一匿名函数赋值给变量fn
    //     alert('I am a pig!!!');
    // }

 fn2();                   // Hello!!!
 function fn2() {
        alert('Hello!!!');      
 }
    // 等价于
    // function fn2() {               // 把函数声明提升到当前作用域的最前面
    //     alert('Hello!!!');       
    // }
    // fn2();                         // Hello!!!

2.几个稍复杂的案例

代码如下（示例）：

案例1：

var num = 8;
fn();          
function fn() {
    console.log(num);
    var num = 20;
}

输出结果：

预解析：

var num;                // 把变量声明提升到当前的作用域最前面——全局变量num提升到全局作用域的最前面
function fn() {         //  把函数声明提升到当前作用域的最前面
       var num;         // 把变量声明提升到当前的作用域最前面——局部变量num提升到局部作用域的最前面
       console.log(num);
       num = 20;        
}
num = 8;
fn();

案例2：

var num = 8;
function fn() {
     console.log(num);
     var num = 20;
     console.log(num);
}
fn();

输出结果：

预解析：

var num;              // 把变量声明提升到当前的作用域最前面——全局变量num提升到全局作用域的最前面
function fn() {
    var num;          // 把变量声明提升到当前的作用域最前面——局部变量num提升到局部作用域的最前面
    console.log(num);
    num = 20;
    console.log(num);
}
num = 8;
fn();

案例3：

var x = 8;
fn();
function fn() {
     var y = 9;
     console.log(x);
     console.log(y);
     var x = '123';
}

输出结果：

预解析：

//结合上述两个案例自己分析看看噢。
var x;       
function fn() {
     var y;
     var x;
     y = 9;
     console.log(x);
     console.log(y);
     x = '123';
}
x = 8;
fn();

案例4：

fn();
console.log(c);
console.log(b);
console.log(a);
function fn() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}

输出结果：

预解析：

//结合上述两个案例自己分析看看噢。
function fn() {
    var a;         //  注意区分var a = b = c = 9与var a, b, c = 9的区别（逗号分隔的相当于同时声明）                                            
    a = b = c = 9;       //  b与c为声明直接赋值，作为全局变量。
    console.log(a);     // 9
    console.log(b);     // 9
    console.log(c);    // 9
}
fn();
console.log(c);    // 9
console.log(b);    // 9
console.log(a);    // Uncaught ReferenceError: a is not defined
                    //       at 预解析案例.html:12

---

总结

学习预解析之后，对于我们认识JavaScript有了更深的理解。

说明

人非生而知之乎。本人学习JavaScript是“师从”哔站阿婆主——黑马程序员pink老师，此文记录了本人所听之学习笔记以及自身之思考体悟。发表此拙作，以期同诸位同仁、朋友共享学习成果及经验。有不足或不当之处还请您斧正。