之前对这块的认识，只限于变量提升、作用域、es6新增了，let、const等新的声明方式，他们是块级作用域，const只能声明常量等等..没有深入了解过，恰巧最近和朋友聊起了这个。如此重新了解整理一番！
JS执行过程与变量提升
语法分析阶段：对加载完成的代码进行语法检验，检验完成后进入预编译阶段；
预编译阶段：搜集函数名以及变量提升，确定this指向和作用域链
执行阶段：通过事件循环执行
因为预编译的存在导致了所有的变量的声明语句，都会被提升到代码的头部，就是常说的变量提升（hoisting）
console.log(a)
var a = "变量提升";
输出"变量提升"
var a;
console.log(a);
a = "变量提升"
输出"undefined"
JavaScript 只会提升声明，不会提升其初始化。如果一个变量先被使用再被声明和赋值的话，使用时的值是 undefined。
函数和变量相比，会被优先提升。这意味着函数会被提升到更靠前的位置
变量的作用域（Scope）
MDN解释：当前的执行上下文。值 (en-US)和表达式在其中 "可见" 或可被访问到的上下文。
看个例子再理解
function ScopeFun() {
var x = "Scope";
console.log(x); //Scope
}
console.log(x); // error
变量x的作用域就是Scope函数，作用域是指变量的可访问性或可见性的区域，哪些部分可以访问变量或变量在哪里可见，他是独立的地盘，可以防止变量泄漏
function a(){
var x = 1;
},
funcction b(){
var x = 3;
}
//这样是没问题的
因为作用域的存在，相同的变量名也不会冲突
全局作用域与局部作用域与块级作用域
在代码中任何地方都能访问到的对象拥有全局作用域
局部作用域是只能在固定代码片段中可访问，常见的就是函数内部
块级作用域可以通过let、const声明，他们的作用域是最近的{},不可以从这对大括号之外访问他们
内层作用域可以访问外层作用域，反之不可以。就是说函数内部可以读取全局变量，在函数外部无法读取函数内部的变量。
{
let a = 'Hello World!';
var b = 'English';
console.log(a); // 输出 'Hello World!'
}
// 输出 'English'
console.log(b);
// 报错r: greeting is not defined
console.log(a);
var可以在{}外访问的到，不是块级作用域
由于业务需求，很多时候需要读取函数内部的局部变量，可以用闭包来实现。
作用域链
在 JavaScript 中使用变量时，JavaScript 引擎将作用域内查找变量的值。如果找不到该变量，它将在外部作用域查找并继续这样做，直到找到该变量或到达全局作用域。
如果它仍然找不到该变量，它将在全局范围内隐式声明该变量（如果不是在严格模式下）或返回一个错误。
let a = 'hello';
function chain() {
let b = 'world';
// 输出 'world'
console.log(b);
// 输出 'hello'
console.log(a);
num = 10;
console.log(num); // 输出10
}
chain();
chain方法被执行的时候，js引擎会查找b变量，在当前作用域里找到它，接下来找a变量，他不在当前作用域，js引擎会去外部作用域查找它。我们赋值给num，js引擎会在当前作用域查找变量，然后在外部作用域查找。
词法环境Lexical Environment
为了理解 JavaScript 引擎如何执行变量查找，我们必须了解 JavaScript 中词法环境的概念。
在 JavaScript 中，每个运行的函数，代码块 {...} 以及整个脚本，都有一个被称为 词法环境（Lexical Environment） 的内部（隐藏）的关联对象。
词法环境对象由两部分组成：
环境记录（Environment Record） —— 一个存储所有局部变量作为其属性（包括一些其他信息，例如
this的值）的对象。对 外部词法环境 的引用，与外部代码相关联。
一个“变量”只是 环境记录 这个特殊的内部对象的一个属性。“获取或修改变量”意味着“获取或修改词法环境的一个属性”。
这就是所谓的与整个脚本相关联的 全局 词法环境。
在上面的图片中，矩形表示环境记录（变量存储），箭头表示外部引用。全局词法环境没有外部引用，所以箭头指向了 null。
随着代码开始并继续运行，词法环境发生了变化
右侧的矩形演示了执行过程中全局词法环境的变化：
-
当脚本开始运行，词法环境预先填充了所有声明的变量。
- 最初，它们处于“未初始化（Uninitialized）”状态。这是一种特殊的内部状态，这意味着引擎知道变量，但是在用
let声明前，不能引用它。几乎就像变量不存在一样。
- 最初，它们处于“未初始化（Uninitialized）”状态。这是一种特殊的内部状态，这意味着引擎知道变量，但是在用
然后
let phrase定义出现了。它尚未被赋值，因此它的值为undefined。从这一刻起，我们就可以使用变量了。phrase被赋予了一个值。phrase的值被修改。
现在看起来都挺简单的，是吧？
变量是特殊内部对象的属性，与当前正在执行的（代码）块/函数/脚本有关。
操作变量实际上是操作该对象的属性。
词法环境是一个规范对象
“词法环境”是一个规范对象（specification object）：它仅仅是存在于 编程语言规范 中的“理论上”存在的，用于描述事物如何运作的对象。我们无法在代码中获取该对象并直接对其进行操作。
但 JavaScript 引擎同样可以优化它，比如清除未被使用的变量以节省内存和执行其他内部技巧等，但显性行为应该是和上述的无差。
我的总结：词法环境是js执行期间存储变量和对象引用的地方。
JS 引擎如何使用词法环境来确定作用域和作用域链。
在一个函数运行时，在调用刚开始时，会自动创建一个新的词法环境以存储这个调用的局部变量和参数。
例如，对于 say("John")，它看起来像这样（当前执行位置在箭头标记的那一行上）：
在这个函数调用期间，我们有两个词法环境：内部一个（用于函数调用）和外部一个（全局）：
内部词法环境与
say的当前执行相对应。它具有一个单独的属性：name，函数的参数。我们调用的是say("John")，所以name的值为"John"。外部词法环境是全局词法环境。它具有
phrase变量和函数本身。
内部词法环境引用了 outer。
在这个示例中，搜索过程如下：
对于
name变量，当say中的alert试图访问name时，会立即在内部词法环境中找到它。-
当它试图访问
phrase时，然而内部没有phrase，所以它顺着对外部词法环境的引用找到了它。
1627557909(1).png
因此，当代码要访问一个变量时 —— 首先会搜索内部词法环境，然后搜索外部环境，然后搜索更外部的环境，以此类推，直到全局词法环境。
重点
作用域是一个变量可见和可访问的区域。就像函数一样，JS中的作用域可以嵌套，JS引擎会遍历作用域链以查找程序中使用的变量。
JS使用词法环境，这意味着变量的作用域是在编译时确定的。JS引擎在程序执行期间使用词法环境来存储变量。
let&const
暂时性死区（temporal dead zone，简称 TDZ）
var b
function tdz() {
b = 'world';
let b
console.log(b)
}
tdz(); //print error
在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”
ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。
总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
const&let
const与let一样存在暂时性死区
一样都是块级作用域
不存在变量提升
不同的是 const声明的时候就必须赋值 不能以后在赋值。
const a;
// SyntaxError: Missing initializer in const declaration
一个很常见的问题，const声明一个对象，改变对象里面的属性的值会不会报错？
多数人第一时间会说会报错，因为const只能声明常量，常量是不可变的，所以会报错
const实际上保证的是变量指向的那个内存地址的指针不得改动。只要指针不变就不会报错。
