7_2：预解析 = 变量提升 + 函数提升

重点

1 在函数内部 直接赋值 没有用var声明 就当全局变量看

一  带着问题学习

坑1

console.log(num);
var num = 10; // 输出 undefined [为什么]

学习了变量提升就可以理解了 执行了以下操作

var num; //变量提升 [只提升变量声明 ]
console.log(num); //顺序执行 num 此刻没有赋值 所有是 undefined
num = 10;

坑2

fun(); //报错了 TypeError: fun is not a function [ 在这里不能调用 ]
var fun = function () {
    console.log(22);
}
fun(); //在这里可以调用

学习了变量提升 也可以理解了 相当于执行了以下代码
var fun; [ fun 是变量 不是函数 ]
fun();
fun = function() {
　　console.log(22);
}

二  预解析

1）js解析器工作流程

// 1 JS解析器运行JS代码分两步：预解析 和 代码执行
// 2 预解析：JS引擎会把代码里面所有的 var function 提升到作用域的最前面
// 3 代码执行：按照书写的顺序从上往下执行

2）预解析

//1 预解析分为： 变量预解析(变量提升) 和 函数预解析(函数提升)

//2 变量提升：把所有的变量声明提升到当前作用域的最前面 [ 不提升赋值操作 ]

//3 函数提升：把所有的函数声明提升到当前作用域的最前面 [ 不调用函数 ]

3） 函数提升代码演示

fun();
function fun(){
　　conslole.log();
}
fun();
// 为什么在函数前后都可以调用？

// 学习了函数提升后就可以理解了 等同于执行了以下代码

function fun() {
　　console.log()
} //函数提升
fun();
fun(); 所有都可以执行

匿名函数不能提升 因为是赋值的形式

三  预解析案例

案例1

var num = 10;
fun();//执行结果 undefined
function fun() {
    console.log(num);
    var num = 20;
}

//预解析 相当于执行了如下代码

var num;//1 提升变量
function fun() {
    var num;//3 局部变量提升
    console.log(num);
    num = 20;
} //2 提升函数

num = 10;//4 顺序执行
fun();//5 顺序执行

先提升全局的 函数内部的变量提升到函数内部最上面

案例2

var num = 10;
function fn() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fn();
//-----执行流程-----
var num;
function fn() {
    var num;
    console.log(num);
    num = 20;
    console.log(num);
}
num = 10;
fn();

案例3

var a = 18;
fun(); //a=undefined b=9
function fun(){
　　var b = 9;
　　console.log(a);
　　console.log(b);
　　var a = '123';
}
//执行流程
var a;
function fun(){
　　var b;
　　var a;
　　b = 9；
　　console.log(a);
　　console.log(b);
　　a = '123';
}
a = 18;
fun();
 

案例4  经典面试题

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

// 预解析 
function fl() {
    var a;
    a = b = c = 9; //等同于 a = 9; b = 9; c = 9;
    console.log(c);
    console.log(b);
    console.log(a);
}
fl();
console.log(c); //c是全局变量
console.log(b); //b是全局变量
console.log(a); //a是局部变量//本节重点
//var a = b = c = 9;// 等于 var a = 9; b = 9; c = 9 [ b和c直接赋值 没有var声明 当全局变量看 ]
//而集体声明是逗号 var a = 9, b =9, c=9;