JS 执行机制——预解析

1.预解析

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

1. 预解析：js 引擎会把 js 里面所有的var还有function提升到当前作用域的最前面
2. 代码执行：按照代码书写的顺序从上往下执行

1.1 变量预解析(变量提升)

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

//1.普通变量
console.log(num);//打印结果：undefined
var num = 10;
//以上两行代码相当于执行了以下代码
var num;
console.log(num);
num = 10;
//所以会打印undefined

//2.函数表达式
fun();//报错，fun not a function
var fun = function() {
    console.log(22);
}
//相当于执行了以下代码
var fun;//声明变量
fun();//fun是变量不是函数不能使用（）
fun = function() {
    console.log(22);
}
//因此，函数表达式，在调用的时候必须写在函数表达式下面

1.2 函数预解析(函数提升)

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

fn();
function fn() {
    console.log(11);//无报错，打印 11
}
//执行顺序如下
function fn() {
    console.log(11);
}
fn();

案例1

var num = 10;
fun();
function fun() {
    console.log(num);
    var num = 20;
}
//打印结果：undefined

//相当于执行了以下操作
var num;
function fun() {
    var num;
    console.log(num);
    num = 20;
}
num = 10;
fun();

案例2

var num = 10;
function fn() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();
//打印结果：undefined，20

//相当于执行了以下代码
var num;
function fn() {
    var num
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fn();

案例3

var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = '123';
}
//打印结果：undefined， 9

//相当于执行以下代码
var a;
function f1() {
    var b;
    var a;
    b = 9;
    console.log(a);
    console.log(b);
    a = '123';
}
 a = 18;
f1();

案例4

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
打印结果： 9 9 9 9 9 报错：a is not defined

//相当于执行以下代码
function f1() {
    //var a = b = c = 9;相当于 var a = 9 ; b = 9; c = 9  即 b 和 c 没有var 声明 当全局变量看
    //集体声明： var a = 9,b = 9, c = 9;相当于 var a; var b; var c;
   
    var a;
    a = b = c = 9;    
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);