JavaScript 预解析----遍历提升和函数提升

浏览器分成两部分： 渲染引擎和JS引擎

渲染引擎： 用来解析HTML与CSS,俗称内核，比如chrome浏览器的blink，老版本的webkit

JS引擎：JS解析器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，而是通过内置的JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所有JavaScript语言归为脚本语言，会逐行解释执行。

作用域（如果在函数内部直接赋值的变量，没有var 声明，则为全局变量）

var a = b = c = 9 // 相当于 var a = 9; b = 9; c = 9; 如果在函数内部直接赋值的变量，没有var 声明，则为全局变量
var a = 9, b = 9, c = 9; //相当于 var a = 9, var b = 9, var c = 9;

js引擎运行js ，分成两步：预解析 + 代码执行

1. 预解析，js引擎会把js 里面所有的 var 和 function 提升到当前作用域的最前面，函数比变量优先

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

3. 优先级（覆盖）： 声明变量 > 声明普通函数 > ( 传参 ) 参数 > 变量提示

// 变量提升，就是把所有的变量声明提取到当前的作用域的最前面  不提示赋值操作
console.log(aaa) //undefined
var aaa = 1
// 相当于执行了
var aaa
console.log(aaa) //undefined
aaa = 1


// 函数提升, 就是把所有的函数声明提升到当前作用域的最前面 不调用函数 （函数表达式 调用必须写在函数表达式的下面）
fun() //报错
var fun = function () {
    console.log('fun')
}
// 相当于执行了
var fun
fun()
fun = function() {
    console.log('fun')
}




//案例 1
var a = 1
fun()
function fun() {
    console.log(a)
    var a = 2
}

//undefined

// 相当于执行了
var a 
function  fun() {
    var a 
    console.log(a)
    a = 2
}
a = 1
fun()




//案例 2
var a = 2
function fun() {
    console.log(a)
    var a = 3
    console.log(a)
}
fun()
// undefined 3

// 相当于执行
var a 
function fun(){
    var a
    console.log(a)
    a = 3
    console.log(a)
}
fun()



// 案例 3
var a =  1
fun()
function fun() {
    var b = 2
    console.log(a)
    console.log(b)
    var a = '123'
}
//undefined 2

// 相当于执行了

var a
function fun() {
        var a 
        var b
        b = 2
        console.log(a)
        console.log(b)
        a = 123
}
a = 1
fun()

// 案例 4
fun()
console.log(c)
console.log(b)
console.log(a)

function fun() {
    var a = b = c = 9 // 相当于 var a = 9; b = 9; c = 9; b 和 c 直接赋值，没有var声明，当成全局变量看
    // var a = 9, b = 9, c = 9; //相当于 var a = 9, var b = 9, var c = 9;
    console.log(a)
    console.log(b)
    console.log(c)
}

// 9
// 9
// 9
// 9
// 9
// a 报错

// // 相当于执行

function fun() {
    var a
    b = 9 // 全局变量
    c = 9 // 全局变量
    a = 9
    console.log(a)
    console.log(b)
    console.log(c)
}
fun()
console.log(c)
console.log(b)
console.log(a)