Skip to content
This repository has been archived by the owner on May 4, 2022. It is now read-only.

Latest commit

 

History

History
159 lines (117 loc) · 2.91 KB

09-JS预解析(重要).md

File metadata and controls

159 lines (117 loc) · 2.91 KB

1. JavaScript预解析

JS代码是由浏览器的JS解析器进行执行额度。JS解析器在运行JS代码的时候分为两步:预解析和代码执行

  1. 我们解释器在运行JS分为两步:预解析、代码执行

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

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

  2. 预解析分为:变量预解析(变量提升)和函数预解析(函数提升)

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

    • 函数提升:把所有的函数声明提升到当前的作用域最前面(只声明,不调用)

2. 一些案例(有助于了解这个概念)

2.1 案例1

var num = 10;
fun();

function fun() {
    console.log(num);
    var num = 20;
}

按照预解析的顺序应该是这样执行的:

var num;

function fun() {
    var num;
    console.log(num); // 根据作用域找最近上一行代码得到结果undefined
    num = 20;
}
num = 10;
fun();

答案是:undefined

2.2 案例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); // 找最近,找到上一行代码预解析只有定义没有赋值,所以是undefined
    num = 20;
    console.log(num); // 有赋值,所以是20
}
num = 10;
fn();

答案是:undefined20

2.3 案例3

var a = 18;
f1();

function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = "123";
}

按照预解析的顺序应该是这样执行的:

var a;
function f1(){
    var b;
    var a;
    b = 9;
    console.log(a); // a只有定义,无赋值
    console.log(b); // b有赋值
    a = '123';
}
a = 18;
f1();

答案是:undefined9

2.4 案例4(难点)

f1();
console.log(c);
console.log(b);
console.log(a);

function f1() {
    var a = b = c = 9;
// 相当于: var a = 9; b = 9; c = 9;这里的b和c没有var声明直接赋值,所以当全局变量看
    // 集体声明: var a=9 , b=9 , c=9
    console.log(a);
    console.log(b);
    console.log(c);
}

上文中的var a = b = c = 9 并不是集体声明的:var a = 9; var b = 9; var c = 9

而是var a = 9;b = 9;c = 9。b和c只有赋值没有声明所以看做是全局变量

按照预解析的顺序应该是这样执行的:

function f1() {
    var a;
    a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c); // b,c都是全局变量
console.log(b);
console.log(a); // 因为a是局部变量,所以会报错

答案是:

9

9

9

9

9

报错:a is not defined!!!