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;

 

posted @ 2021-02-16 10:58  棉花糖88  阅读(72)  评论(0编辑  收藏  举报