JavaScript预解析

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

JavaScript 是 轻量级 解释型 弱类型 脚本语言

所谓的 预解析/预解释/预编译 是 JavaScript程序的一种执行方式

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

代码执行：按照代码书写的顺序从上往下执行

2.预解析分为 变量预解析 和 函数预解析

变量预解析 也叫 变量提升

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

函数预解析 也叫 函数提升

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

3.用代码解释js预解析

console.log(num); //执行结果：undefined
var num = 16;

//是因为预解析后，相当于 执行了以下代码

var num;//变量提升
console.log();
num = 10;

fn(); // 输出结果：18
function fn(){
    console.log(18);
}

//预解析后，相当于执行了以下代码
function fn() {//函数提升
   console.log(18);
}
fn();

//这也就解释了 声明式函数 在 调用函数时 fn() 既可以放在函数的下面，也可以放在函数的上面

fn(); //直接会报错
var fun = function() { //赋值式函数无法进行函数提升
    console.log(20);
}

//预解析后，相当于执行了以下代码

var fn;//变量提升
fn();
fn = function() { 
    console.log(20);
}

4.经典案例

fn();
console.log(c);
console.log(b);
console.log(a);
function fn() {

    //注意一个点
    //var a = b = c = 22; 相当于var a = 22; b = 22; c = 22;
    //可不是 var a = 22; var b = 22; var c = 22;想要是这样的，可以是：var a,b,c = 22;
    var a = b = c = 22; 
    console.log(a);
    console.log(b);
    console.log(c);
}

//预解析后，相当于执行了以下代码

function fn() {
    var a;
    a = 22;
    //b和c直接赋值 没有var声明,相当于是全局变量  
    b = 22;
    c = 22;
    console.log(a); //22
    console.log(b); //22
    console.log(c); //22
}
fn();
console.log(c); //22
console.log(b); //22
console.log(a); //undefined