引言
在JavaScript编程中，作用域（Scope）和变量提升（Hoisting）是两个核心概念，它们深刻影响着代码的执行逻辑和变量的可见性。本文将深入探讨这两个概念，特别是它们如何与JavaScript的执行机制——调用栈（Call Stack）相互作用，以及ES6如何通过let和const引入新的词法环境（Lexical Environment）来改进作用域管理。
调用栈：JavaScript的执行机制 JavaScript引擎通过调用栈来管理函数的执行。调用栈是一个后进先出（LIFO）的数据结构，用于跟踪哪些函数正在执行以及它们的执行顺序。当一个函数被调用时，一个新的执行上下文（Execution Context）会被创建并推入栈中；当函数执行完毕，该执行上下文会从栈中弹出，控制权返回给之前的执行上下文。
栈底：全局上下文（Global Context），它包含了全局变量和函数定义。 栈中：函数上下文（Function Context），每当一个函数被调用时，都会创建一个新的函数上下文并推入栈中。 块级作用域与变量环境 在ES5及更早版本中，JavaScript只有全局作用域和函数作用域，没有块级作用域（Block Scope）。这意味着在if语句、for循环等块级结构中声明的变量，其作用域实际上是包含它们的整个函数或全局作用域。
ES6引入了let和const关键字，它们创建了块级作用域内的变量，使得变量的作用域更加精确和可控。这背后的关键在于，let和const声明的变量在词法环境（Lexical Environment）中管理，而不是传统的变量环境（Variable Environment）。词法环境包含了所有在当前作用域内声明的变量和函数，而变量环境则主要用于函数作用域内的变量。
变量提升与暂时性死区 变量提升（Hoisting）是指在JavaScript代码执行之前，变量和函数声明会被提升到它们所在作用域的最顶部。这意味着你可以在声明之前引用变量或函数（尽管这通常不是一个好的编程实践）。然而，对于使用var声明的变量，虽然声明被提升，但赋值操作不会提升，这可能导致在变量初始化之前访问它时出现undefined。
ES6的let和const改变了这一行为。在块级作用域内，使用let或const声明的变量在声明之前处于一个“暂时性死区”（Temporal Dead Zone, TDZ），这意味着在这个区域内访问这些变量会导致一个ReferenceError。这一改变有效避免了在变量初始化之前的不安全访问。
代码示例
var a = 1; // 函数作用域
let b = 2; // 块作用域（整个函数体）
{
let b = 3; // 新的块作用域，遮蔽了外部的 let b
let d = 5; // 块作用域
var c = 4; // 函数作用域，但由于在块内声明，会提升到函数顶部（但赋值留在块内）
console.log(a); // 输出 1
console.log(b); // 输出 3（块作用域的 b）
}
// 此时，块作用域的 b 和 d 已经销毁
{
let b = 5; // 另一个新的块作用域，与上面的 b 无关
}
// 此时，这个块作用域的 b 也已经销毁
console.log(b); // 输出 2（函数作用域的 let b）
console.log(c); // 输出 4（尽管在块内声明，但 var c 是函数作用域的）
// console.log(d); // 会报错，因为 d 是块作用域的，并且已经销毁
}
foo();
词法作用域与作用域链 词法作用域（Lexical Scope）是指函数定义时所在的作用域决定了其内部变量的查找规则。换句话说，一个函数在哪里定义，就决定了它在哪里查找变量。这与动态作用域（Dynamic Scope）相对，后者是根据函数调用时的作用域来确定变量查找规则的。
在JavaScript中，每个执行上下文都有一个与之关联的作用域链（Scope Chain），用于在变量查找时从当前作用域向外冒泡，直到找到变量或到达全局作用域。对于函数内部的变量查找，词法作用域规则决定了outer引用（即指向外部作用域）的查找路径。
var a = 3, b = 5;
var bar = function() {
var b = 7, c = 11;
a += b + c;
console.log(a, b); // 21, 7
console.log(c); // 11
};
console.log(a, b); // 3, 5
bar();
console.log(a, b); // 21, 5
};
foo(); // 调用 foo 函数
3 5 // 来自 foo 函数开始处的 console.log(a, b);
ReferenceError: c is not defined // 尝试打印未定义的 c
21 7 // 来自 bar 函数内部的 console.log(a, b); a 是外部作用域的，b 是内部作用域的
11 // 来自 bar 函数内部的 console.log(c);
21 5 // 来自 foo 函数末尾的 console.log(a, b); a 被 bar 函数更新了，但 b 仍然是外部作用域的 **
总结 调用栈：管理JavaScript函数的执行顺序，通过后进先出的数据结构跟踪执行上下文。 变量环境与词法环境：在ES6中，let和const通过分离变量环境和词法环境，实现了更精细的块级作用域管理。 变量提升与暂时性死区：var声明的变量会被提升，但赋值不会；let和const声明的变量在声明前处于暂时性死区，防止不安全访问。 词法作用域与作用域链：决定了变量查找的规则，通过作用域链从内到外查找变量，直至全局作用域。 理解这些概念不仅有助于编写更健壮、可维护的JavaScript代码，还能更深入地把握JavaScript的运行机制，提高编程效率和代码质量。
