JavaScript原生系列-预解析、解析器、变量提升、函数提升、作用域、作用域链

JS中无论哪种形式声明(var, let, const, function, function*, class)都会存在提升现象，不同的是， var,function,function*的声明会在提升时进行初始化赋值为 undefined，因此访问这些变量的时候，不会报 ReferenceError 异常，而使用 let,const,class 声明的变量，被提升后不会被初始化，这些变量所处的状态被称为“temporal dead zone”，此时如果访问这些变量会抛出ReferenceError 异常，看上去就像没被提升一样。

4.什么是提升、变量提升、函数提升、为什么会有提升

1.什么是提升（Hosting）？

引擎会在解释JavaScript代码之前首先对其进行编译，编译过程中的一部分工作就是找到所有的声明，并用合适的作用域将他们关联起来，这也正是词法作用域的核心内容。

简单说就是在js代码执行前引擎会先进行预编译，预编译期间会将变量声明与函数声明提升至其对应作用域的最顶端。

2.变量提升

变量提升即将变量声明提升到它所在作用域的最开始的部分。

L(a,person);//undefined undefined
var a = 1,person={name:'pca',age:22};
L(a,person);//1 {name:'pca',age:22}

3.函数提升

函数提升即将函数声明提升到它所在作用域的最开始的部分。

L(f1); // ƒ f1() {L("222")}
L(f2); // undefined  
function f1() {L("111")}   //函数声明
var f2 = function() {}    //函数表达式
function f1() {L("222")} // 函数提升，整个代码块提升到文件的最开始　　　
L(f1);//ƒ f1() {L("222")}   
L(f2);//ƒ () {}
//分析
function f1() {L("222")} 
var f2;
L(f1);
L(f2); 
f2 = function() {}    
L(f1);  
L(f2);

4.为什么会有提升

下面是Dmitry Soshnikov早些年的twitter，他也对这个问题十分感兴趣， Jeremy Ashkenas想让Brendan Eich聊聊这个话题：

Brendan Eich给出了答案：

大致的意思就是：由于第一代JS虚拟机中的抽象纰漏导致的，编译器将变量放到了栈槽内并编入索引，然后在（当前作用域的）入口处将变量名绑定到了栈槽内的变量。（注：这里提到的抽象是计算机术语，是对内部发生的更加复杂的事情的一种简化。）

然后，Dmitry Soshnikov又提到了函数提升，他提到了相互递归（就是A函数内会调用到B函数，而B函数也会调用到A函数）：

Brendan Eich又给出答案：

Brendan Eich很确定的说，函数提升就是为了解决相互递归的问题，大体上可以解决像ML语言这样自下而上的顺序问题。

最后，Brendan Eich还对变量提升和函数提升做了总结：大概是说，变量提升是人为实现的问题，而函数提升在当初设计时是有目的的。

5.函数提升和变量提升的具体情况

1)函数表达式没有函数提升(提升的是变量)，函数声明的函数才有函数提升

// a2(); //a2 is not a function
a2_();
var a2 = function(){L("a2")};
function a2_(){L("a2_")};

2)函数和变量同名、变量同名、函数同名

当变量和函数同名时，函数提升比变量提升优先级高。但是和函数名相同变量的赋值还是会覆盖函数的。

2-1)函数和变量同名

L(a);//f a(){L(4)}
var a = 1;
L(a);//1
function a(){L(2)};
L(a);//1
var a = 3;
L(a);//3
function a(){L(4)};
L(a);//3
//分析
function a(){L(4)};
var a;//忽略
L(a);
a = 1;
L(a);
L(a);
a = 3;
L(a);
L(a);

2-2)函数同名

同名函数，后边覆盖前面

function a(){L(1)}
L(a)
function a(){L(2)}
L(a)
a()
//解析
function a(){L(1)}
function a(){L(2)}
L(a)
L(a)
a()

2-3)变量同名

同名变量，声明会被提升，后边会忽略

L(a)
var a = 1
L(a)
var a = 2
L(a)
//分析
var a；
var a; //忽略
L(a) // undfined
a = 1
L(a) //1
a = 2
L(a)//2

3)函数内部同样适用于js预解析

function t1(age) {
    L(age);
    var age = 27;
    L(age);
    function age() {}
    L(age);
}
t1(3);//ƒ age() {}  27  27
//分析
function t1(age) {
    function age() {}
    var age;//忽略

    L(age);
    age = 27;
    L(age);

    L(age);
}

6.深入解析过程

1)首先是找到script标签按照script块依次解析

首先是找到<script>标签按照<script>块依次解析，JS预解析不会跨<script>块去进行预解析。

<script>
    // alert(msg);//msg is not defined
    // test();//test is not defined
</script>
<script>
    var msg ="test";
    function test(){
        alert("this is function");
    }
</script>

如果把两个script块调换一下位置，结果就不一样了。

<script>
    var msg ="test";
    function test(){
        alert("this is function");
    }
</script>
<script>
    alert(msg);//test
    test();//this is function
</script>

按照script块顺序进行预解析，当第一个script块预解析完，会解析到var msg 和function test，当再第二个script块中调用alert(msg);和test();时上面的js程序已经执行完毕了，自然会弹出 test 和this is function。

2)解析执行环境

function test(){
    var msg ='This is test';
}
alert(msg); // 报错msg未定义 (作用域不同，解析执行环境不同)

3)对标识符（ var function）进行解析

如果一个文档流中包含多个script代码段（用script标签分隔的js代码或引入的js文件），它们的运行顺序是：

步骤1. 读入第一个代码段（js执行引擎并非一行一行地执行程序，而是一段一段地分析执行的）

步骤2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到步骤5

步骤3. 对var变量和function定义做“预解析”（永远不会报错的，因为只解析正确的声明）

步骤4. 执行代码段，有错则报错（比如变量未定义）

步骤5. 如果还有下一个代码段，则读入下一个代码段，重复步骤2

步骤6. 结束

7.案例

1.一个经典的案例

我们知道函数一执行完是会被垃圾回收机制销毁的。
但了解闭包的朋友会相信，内存暂用这一说法的
其实 函数 return 直接返回的那个，其实是一个结果或者是值，是不需要预解释的。
说了这么多看代码：
var n = 99;

function outer(){
    var n = 0;
    return function inner(){
    return n++; // 注意不是++n
    }
}
var c = outer();  // c=function inner(){ return n++; }
var num1 = c();  // 0，然后再执行n++ 此时n=1;
var num2 = c();  // 1, n++ 2;
var d = outer(); //重新开辟新
var num3 = d();  //0

当我们的一个函数返回一个新的function，我们在外面定义一个变量来接收，这样这个函数
的内存就不能在执行完成后自动销毁，也就是我们所谓的函数内存被占用了。
变量的值要看它在哪定义，this，要看它在哪调用的。

2.代码块中提升的案例(ES5没有块级作用域，所以此处是在全局作用域中)

var a = 1;
if(true){
    L(a);//1
    var a = 2;
    L(a);//2
}
L(a);//2

if(false) {//
    // var mark1 = 1;//Identifier 'mark1' has already been declared	标识符“mark1”已经声明
     function mark1(){
        L("exec mark1");//为true时会输出exec mark1
     }
    // var mark1;//Identifier 'mark1' has already been declared
    L(mark1);//为true时直接输出整个函数
 }
 L(mark1);//为false时输出  undefined ；为true时直接输出整个函数
 mark1();//if为true时，就会输出exec mark1，为false是 mark1 is not a function

8.作用域和作用域链

在ES5的时候，只存在两种作用域：函数作用域和全局作用域；ES6出现后，增加了块级作用域。

1)作用域：全局作用域和局部作用域

函数里面的作用域成为局部作用域，window所在的作用域称为全局作用域；在全局作用域下声明的变量是全局变量；在“局部作用域中声明的变量”和“函数的形参”都是局部变量；

var a = 0;//全局作用域
func();
function func(){
  var b = 1;//局部作用域（函数作用域）
  L(a); //0 函数作用域中访问全局变量
  L(b); //1
}
L(b); //报错 全局作用域中访问func函数作用域中的局部变量

L(a);先到func中找a，找不到然后到上一层作用域中去找a，形成了作用域链。

2)作用域链

在局部作用域中，代码执行的时候，遇到了一个变量，首先需要确定它是否为局部变量，如果是局部变量，那么和外面的任何东西都没有关系，如果不是局部的，则往当前作用域的上级作用域进行查找，如果上级作用域也没有则继续查找，一直查找到window为止，这就是作用域链。

var i = 1;
function fn1(){
    var i = 5;
    var j = 20
    function fn2()
    {
      var i = 10;
      function fn3()
      {
        var j = 15;
        console.log(i); //10
      }
      fn3();
      console.log(i); //10
      console.log(j); //20
    }
    fn2();
}
fn1();
console.log(i); //1

3）函数的执行

当函数执行的时候，首先会形成一个新的局部作用域，然后按照如下的步骤执行：

第一步：如果有形参，先给形参赋值；

第二部：进行局部作用域中的预解析；

第三部：局部作用域中的代码从上到下执行

函数形成一个新的私有的作用域，保护了里面的私有变量不受外界的干扰（外面修改不了私有的，私有的也修改不了外面的），这也就是闭包的概念。

4)在ES5中没有块级作用域，ES6出现后，增加了块级作用域

var a = 0;
if(a < 10)
{
    a++;
    var b = a;
}
console.log(b); //1  b是全局变量。处于全局作用域,会成为全局对象window对象的属性

理解：以上代码，虽然b是在if代码块中定义的，但由于ES5只有全局作用域和函数作用域，没有块级作用域，而b变量不是在函数中定义的，所以b只能是全局变量。

let a = 0; //注意：使用'let声明的全局变量不会成为window对象的属性
if(a < 10)
{
    a++;
    let b = a;
}
console.log(b); //报错 b是if代码块中的变量，只在'if'代码块{}中生效。处于块级作用域。

ES6中{ }会形成一个块级作用域，所以上面代码的b处于if这个块作用域中，不属于全局作用域。

9.全局作用域下带var和不带var的区别

在全局作用域中声明变量带var可以进行预解析，所以在赋值的前面执行不会报错；声明变量的时候不带var的时候，不能进行预解析，所以在赋值的前面执行会报错。

//正确，有变量提升
L(a);
var a = 1;

//错误，没有变量提升
L(b);//b is not defined
b = 2;

b = 2; 相当于给window增加了一个b的属性名，属性值是2；var a = 1; 相当于给全局作用域增加了一个全局变量a，但是不仅如此，它也相当于给window增加了一个属性名a，属性值是1；

function fn() {
    // L(total); // Uncaught ReferenceError: total is not defined
    total = 100;
}
fn();
L(total);//100

10. 预解析中的一些变态机制

1)不管条件是否成立，都要把带var的进行提前的声明

if (!('num' in window)) { 
    var num = 12;
}
console.log(num); // undefined

JavaScript进行预解析的时候，会忽略所有if条件，因为在ES6之前并没有块级作用域的概念。本例中会先将num预解析，而预解析会将该变量添加到window中，作为window的一个属性。那么 'num' in window 就返回true，取反之后为false，这时代码执行不会进入if块里面，num也就没有被赋值，最后console.log(num)输出为undefined。

2)只预解析“=”左边的，右边的是指针，不参与预解析

//1
fn(); // -> undefined();  // Uncaught TypeError: fn is not a function
var fn = function () {
    console.log('ok');
}

//2
fn(); -> 'ok'
function fn() {
    console.log('ok');
}
fn(); -> 'ok'

3)自执行函数：定义和执行一起完成

(function (num) {
    console.log(num);
})(100);

自执行函数定义的那个function在全局作用域下不进行预解析，当代码执行到这个位置的时候，定义和执行一起完成了。

4)return下的代码依然会进行预解析

//return 后面的函数也是会变量提升的
var a = 1;
function foo() {
    a = 10;
    L(a);//10
    return;
    function a() {};
}
foo();
L(a);//1
//解析
var a;
a = 1;
function foo() {
    function a() {};
    a = 10;
    L(a);
    return;
}
foo();
L(a);

函数体中return后面的代码，虽然不再执行了，但是需要进行预解析，return中的代码，都是我们的返回值，所以不进行预解析。

5)名字已经声明过了，不需要重新的声明，但是需要重新的赋值

var fn = 13;                                       
function fn() {                                    
    console.log('ok');                               
}                                                  
fn(); // Uncaught TypeError: fn is not a function
//解析
function fn() {                                    
    console.log('ok');                               
} 
var fn;//忽略
fn = 13;
fn();

fn(); //2                                            
function fn() {console.log(1);}                         
fn(); //2                                            
var fn = 10;                   
fn(); // Uncaught TypeError: fn is not a function                          
function fn() {console.log(2);}                  
fn();//不执行
//分析
function fn() {console.log(1);} 
function fn() {console.log(2);} 
var fn;//忽略
fn();                                                                    
fn();                                         
fn = 10;                  
fn();                                   
fn();

参考资料：https://blog.csdn.net/bingo_wangbingxin/article/details/79159015

参考资料：https://www.cnblogs.com/shaohua007/p/7587657.html

JavaScript原生系列-预解析、解析器、变量提升、函数提升、作用域、作用域链

博客地址：https://blog.csdn.net/pcaxb/article/details/102396423