一文搞懂JS系列（一）之编译原理，作用域，作用域链，变量提升

写在最前面：这是我即将开始写的一个系列，主要是在框架横行的时代，虽然上班用的是框架，但是对于面试，以及技术进阶，JS基础知识的铺垫是锦上添花，也是不得不学习的一块知识，虽然开汽车的不需要很懂汽车，只需要掌握汽车的常用功能即可。但是如果你懂汽车，那你也能更好地开车，同理。当然，一篇文章也不会光光只讲一个知识点，一般会将有关联的知识点串联起来，一边记录自己的学习，一边分享自己的学习，互勉！如果可以的话，也请给我点个赞，你的点赞也能让我更加努力地更新！

概览

• 食用时间： 5-10分钟
• 难度： 简单，别跑，看完再走

JS编译原理

我们先来看一行代码

var name='jack';

在我们眼中，这是一行代码，一个语句就能搞定的事情呀，但是，在JS的眼里，这句话的代码应该是下面这种方式呈现的

var name;    //编译阶段处理
name='jack';    //执行阶段处理

是不是发现这和你原本认识的JS不太一样，那是因为JS编译主要分为两个阶段，编译阶段和执行阶段，让我们首先来看下这两个阶段分别做了那些事情：

• 编译阶段

  这个阶段的主角就是所谓的编译器，这个编译器会找遍当前作用域，看看是不是已经存在一个叫 name 的变量。如果已经存在，那么就什么都不做，直接忽略 var name 这个声明，继续编译下去；如果没有，则在当前作用域里新增一个叫 name 的变量。然后，编译器会为引擎生成运行时所需要的代码，程序就进入了执行阶段

• 执行阶段

  这个阶段的主角就是大家所熟悉的JS引擎啦，JS引擎在运行的时候，也会先找遍当前作用域，看看是否有一个叫 name 的变量，如果有的话，那么刚刚好，直接赋值，如果没有的话，那就是当前作用域没有，那怎么办，那就考虑探出头去，去外面（ 父级作用域 ）看看有没有，没有的话，再去外面查找，一层又一层（ 当然如果是还有父层的话 ），如果最终还是找不到的话，那么JS引擎也表示无能为力，那就抛个异常给别人看看吧，表示自己已经努力过了。

  上面提到的去外面查找，一层又一层，从当前作用域再到父级作用域，再到父级的父级作用域，以此类推，就是所谓的作用域链了，就跟链条一样，一节有一节往上，是不是形容地可以说是很贴切了。总结而言就是，作用域套作用域，也就有了所谓的作用域链

作用域

• 定义

  大家都知道，变量最基本的能力就是能够存储变量当中的值、并且允许我们对这个变量的值进行访问和修改，而对于变量存储，访问的一套规则,就是所谓的作用域

• 分类

  • 全局作用域

  在任何函数外或者代码块之外的顶层作用域就是全局作用域，而里面的变量就是全局变量

  var name='jack';   //全局作用域
  
  function showName(){    //函数作用域
    console.log(name);
  }
  
  {
    name='test';    //块级作用域
  }
  
  showName();    //test
  

  可以看到全局变量，无论是在全局作用域，函数作用，还是块级作用域中都可以正常访问

  • 函数作用域

  在函数内的作用域就是函数作用域

  function showName(){
    var name='jack';    //函数作用域
  }
  
  showName();   //方法调用
  
  {
    console.log(name);  //块级作用域,Uncaught ReferenceError: name is not defined
  }
  
  console.log(name);  //全局作用域,Uncaught ReferenceError: name is not defined
  

  可以看到函数内部变量，在全局作用域以及块级作用域中，都无法访问，只有在函数内部，才能访问的到，所以函数内的变量也被称为局部变量

  • 块作用域

  在 ES6 中新出的两个新关键字 let和 const中，自带块级作用域，块级作用域相当于是只在这块代码块中生效，如果它被大括号 {} 所包围，那么大括号中就是一段代码块，代码块中使用 let 和 const 声明的变量也被称为局部变量

   {
     let name='jack';
   }
  
   console.log(name);    //Uncaught ReferenceError: name is not defined
  
   function showName{
     console.log(name);
   }
  
   showName();    //Uncaught ReferenceError: name is not defined
  

  可以看到块级作用域中的变量，出了那个代码块，就找不到了

其实上面的三种情况，结合JS编译原理和作用域链向外不向内查找，思考一下，也不难理解

作用域链

回到作用域链，其实在上面已经解释的差不多了，作用域和作用域的嵌套，就产生了作用域链，另外要记住的一个特性就是作用域链的查找，向外不向内，想想探出头去，而不是看着锅里，就可以了

变量提升

先来看一段代码

name='jack';
console.log(name);    //jack
var name;

你会发现，这段代码不会发生报错，并且能正常地运行，结合上面所说的JS编译原理，你就能想到，在JS的眼中，它的代码实际上是这样子的，这就是所谓的代码提升，说白了那就是代码的声明提到代码的最前面

var name;
name='jack';
console.log(name);    //jack

其实这个变量提升应该是照道理接着编译原理写下来的，为什么放到了最后呢，因为如果你忘了，正好往上翻一下，重新回温一遍JS编译原理

紧接着上面，让我们来看下不吃变量提升这一套的 let 和 const ，先来看一段代码

name='jack';
console.log(name)    //Uncaught ReferenceError: Cannot access 'name' before initialization
let name;

黑人问号 ？？？ ，说好的变量提升呢，记住 let 和 const 的一个特点，禁用变量提升，这也是 ES6 故意为之的，将生命前不可用做到了强约束，总结而言，** var 存在变量提升， let 和 const 不存在变量提升**

既然已经提到了 const ，顺带提一下它声明了以后必须赋值的操作

const name;    //Uncaught SyntaxError: Missing initializer in const declaration

暂时性死区

紧接着上面，让我们来看下什么叫做暂时性死区，先来看一段代码

var name='jack';

{
  name='bob';
  let name;    //Uncaught ReferenceError: Cannot access 'name' before initialization
}

记住 ES6 中的一个特性，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。因为JS清楚地感知到了 name 是用 let 声明在当前这个代码块内的，所以会给这个变量 name 加上了暂时性死区的限制，它就不往外探出头了。

那么，如果我们把上面的let name;去掉，程序也将正常运行， name 的值也被成功修改为了bob，就是正常地按照作用域链的规则，向外探出头去了。