JavaScript Hoisting（提升）：变量与函数声明的词法环境（Lexical Environment）创建

各位同仁，各位对JavaScript深感兴趣的开发者们，大家好。

今天，我们将深入探讨JavaScript中一个既基础又常常引人误解的核心概念——Hoisting（提升）。它不仅仅是一个简单的代码行为现象，更是JavaScript引擎在执行代码前，如何构建其内部词法环境（Lexical Environment）的关键体现。理解提升，就是理解JavaScript代码在幕后是如何被组织和准备的，这对于编写健壮、可预测且易于维护的代码至关重要。

我们将从最基本的概念开始，逐步深入，揭示变量、函数、以及ES6引入的let、const、class等声明在提升机制下的不同表现。在此过程中，我们将大量运用代码示例，并通过严谨的逻辑分析，帮助大家建立起对这一机制的全面认知。

---

一、 JavaScript引擎、执行上下文与词法环境的基石

在深入Hoisting之前，我们必须先建立几个基础概念的共识。

1.1 JavaScript引擎的幕后工作

当你编写JavaScript代码时，它并不会被浏览器或Node.js环境直接执行。取而代之的是，JavaScript引擎（如V8、SpiderMonkey、JavaScriptCore等）会介入并承担繁重的工作。这个过程大致可以分为两个阶段：

• 解析（Parsing）阶段：引擎首先会读取你的代码，将其转换为抽象语法树（AST）。在这个阶段，引擎会识别所有的变量声明、函数声明等。
• 执行（Execution）阶段：AST被转换为可执行的代码，并开始运行。

Hoisting的“发生”正是在解析阶段与执行阶段之间的某种准备工作。它并非字面意义上的将代码“移动”到文件顶部，而是一种在代码执行前，将某些声明的信息预先存储到内存中的行为。

1.2 执行上下文（Execution Context）

JavaScript代码的执行总是发生在特定的执行上下文中。执行上下文是一个抽象的概念，它定义了当前代码执行的环境。主要有三种类型的执行上下文：

• 全局执行上下文（Global Execution Context）：当JavaScript文件首次加载时创建。它代表了最外层的环境，通常与全局对象（浏览器中的window，Node.js中的global）关联。
• 函数执行上下文（Function Execution Context）：每当一个函数被调用时创建。每个函数调用都会创建一个独立的执行上下文。
• Eval函数执行上下文（Eval Function Execution Context）：当eval()函数被使用时创建，但由于其潜在的安全和性能问题，不推荐使用。

每个执行上下文都有两个主要阶段：

1. 创建阶段（Creation Phase）：在代码执行之前，引擎会做一些准备工作，包括：
   • 确定this的值。
   • 创建词法环境（Lexical Environment）。
   • 创建变量环境（Variable Environment）。（在ES6之前，变量环境和词法环境基本是同一概念，ES6引入let/const后，词法环境负责处理块级作用域，而变量环境仍负责var/函数声明）
   • 创建作用域链（Scope Chain）。
2. 执行阶段（Execution Phase）：代码逐行执行。

Hoisting的核心机制就发生在创建阶段。

1.3 词法环境（Lexical Environment）的解剖

词法环境是JavaScript规范中定义的一个核心概念，它用来存储标识符（变量名、函数名等）和它们的值的映射关系，以及对外部词法环境的引用。简单来说，它是一个存储“变量”和“函数”的地方。

一个词法环境主要包含两个组件：

1. 环境记录（Environment Record）：这是实际存储标识符绑定（即变量和函数）的地方。它又可以分为两种：
   • 声明式环境记录（Declarative Environment Record）：用于存储函数声明、var变量声明、let和const声明。
   • 对象环境记录（Object Environment Record）：用于存储with语句中对象属性，以及全局上下文中的全局对象属性。在全局上下文中，var声明和函数声明会同时在全局对象上创建属性。
2. 外部词法环境引用（Outer Lexical Environment Reference）：这是一个指向其外部（包含它的）词法环境的引用。这个引用是构建作用域链的关键，使得JavaScript能够查找变量和函数的定义。

当一个执行上下文被创建时，其关联的词法环境也被创建。在这个词法环境的“创建阶段”，JavaScript引擎会扫描当前作用域内的代码，并识别所有的变量声明和函数声明。这些声明会被添加到环境记录中，但它们的值的初始化方式有所不同，这正是Hoisting现象的根源。

---

二、 var 变量的提升：声明被提升，初始化为 undefined

在ES6之前，var是声明变量的唯一方式。var声明的变量具有函数作用域（或全局作用域），并且它们的声明会被提升。

2.1 var 变量提升的机制

当JavaScript引擎在创建执行上下文的阶段遇到var声明时，它会执行以下操作：

1. 将变量名添加到当前词法环境的环境记录中。
2. 将该变量初始化为 undefined。

这意味着，无论var声明在代码的哪个位置，它都会在执行阶段开始之前被“知道”，并且它的初始值是undefined。实际的赋值操作则发生在代码执行到该行时。

2.2 代码示例与解析

让我们通过一系列代码示例来深入理解var的提升行为。

示例 2.2.1：在声明前访问 var 变量

console.log(myVar); // 输出: undefined
var myVar = 10;
console.log(myVar); // 输出: 10

解析：

在代码执行之前，JavaScript引擎的创建阶段会处理var myVar = 10;这行。它会将myVar添加到全局词法环境的环境记录中，并将其值初始化为undefined。

因此，当console.log(myVar);第一次执行时，myVar已经存在于词法环境中，其值为undefined。

当代码执行到var myVar = 10;时，myVar被赋值为10。所以第二次console.log(myVar);会输出10。

等效的“概念性”代码：

var myVar; // 声明被提升，并初始化为 undefined
console.log(myVar); // undefined
myVar = 10; // 赋值操作留在原地
console.log(myVar); // 10

示例 2.2.2：重复声明 var 变量

var x = 1;
console.log(x); // 输出: 1

var x = 2; // 不会报错，只是重新赋值
console.log(x); // 输出: 2

function test() {
    var y = 3;
    console.log(y); // 输出: 3
    var y = 4; // 不会报错，只是重新赋值
    console.log(y); // 输出: 4
}
test();

解析：

var允许在同一作用域内重复声明同一个变量。在创建阶段，如果一个var变量已经被添加到环境记录中，重复的var声明会被忽略（或者说，只是再次确认其存在，不会重新初始化）。实际的赋值操作则会在执行阶段覆盖之前的值。

示例 2.2.3：var 的函数作用域与提升

function greet() {
    console.log(message); // 输出: undefined
    var message = "Hello";
    console.log(message); // 输出: Hello
}
greet();

// console.log(message); // ReferenceError: message is not defined

解析：

当greet()函数被调用时，一个新的函数执行上下文被创建，随之创建的是一个函数词法环境。在这个词法环境的创建阶段，var message = "Hello";中的message被提升到函数作用域的顶部，并初始化为undefined。

因此，函数内部的第一次console.log(message);会输出undefined。接着message被赋值为"Hello"，第二次console.log(message);输出"Hello"。

函数外部无法访问message，因为message是函数作用域内的变量，不会提升到全局作用域。

示例 2.2.4：循环中的 var 陷阱

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 100);
}
// 输出:
// 3 (约100ms后)
// 3 (约100ms后)
// 3 (约100ms后)

解析：

这是一个经典的var陷阱。var i声明的i具有全局作用域（如果for循环在全局上下文），或者函数作用域（如果for循环在函数内部）。i被提升到其作用域的顶部。

当setTimeout的回调函数执行时（在主线程循环结束后），for循环已经完成，此时i的值已经是3。所有的回调函数都引用同一个共享的i变量，因此它们都输出3。

等效的“概念性”代码：

var i; // i被提升到全局作用域
for (i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 100);
}

2.3 总结 var 变量的提升

特性	描述
提升行为	声明被提升到其作用域（函数或全局）的顶部。
初始化	在提升时，变量被自动初始化为 undefined。
作用域	函数作用域（Function Scope）或全局作用域（Global Scope）。
重复声明	允许在同一作用域内重复声明，不会引发错误，但可能覆盖先前的值。
访问时机	在声明之前可以访问，但值为 undefined。
潜在问题	容易导致变量意外覆盖和闭包问题，特别是在循环中。

---

三、 函数声明的提升：函数体都被提升

与var变量类似，函数声明（Function Declaration）也会被提升，但其提升行为略有不同，也更为“完整”。

3.1 函数声明提升的机制

当JavaScript引擎在创建执行上下文的阶段遇到函数声明时，它会执行以下操作：

1. 将函数名添加到当前词法环境的环境记录中。
2. 将该函数名绑定到实际的函数对象（Function Object）。

这意味着，整个函数体都会被提升。在代码执行之前，函数就已经可以在其作用域内的任何地方被调用。

3.2 代码示例与解析

示例 3.2.1：在声明前调用函数

sayHello(); // 输出: Hello!

function sayHello() {
    console.log("Hello!");
}

sayHello(); // 输出: Hello!

解析：

在代码执行之前，function sayHello() { ... }这个函数声明会被引擎发现。sayHello这个标识符会被添加到全局词法环境的环境记录中，并直接指向这个函数对象。

因此，第一次sayHello();调用时，函数已经完全可用。这与var变量只提升声明并初始化为undefined的行为形成鲜明对比。

示例 3.2.2：函数声明与 var 变量的名称冲突

当函数声明与var变量声明使用相同的名称时，函数声明通常会优先。

console.log(foo); // 输出: [Function: foo]
foo();            // 输出: I am a function.

var foo = 10;
console.log(foo); // 输出: 10

function foo() {
    console.log("I am a function.");
}

console.log(foo); // 输出: 10

解析：

1. 创建阶段：
   • 引擎首先处理函数声明 function foo() { ... }，将foo绑定到函数对象。
   • 接着处理 var foo = 10;。由于foo已经存在并绑定到函数对象，var声明不会重新初始化它，也不会覆盖函数绑定。（这是一个关键点：函数声明优先级高于var变量声明）
2. 执行阶段：
   • console.log(foo);：此时foo仍然是函数对象，所以输出[Function: foo]。
   • foo();：函数被正常调用，输出I am a function.。
   • var foo = 10;：执行到这一行时，foo被赋值为10，覆盖了之前的函数对象。
   • console.log(foo);：此时foo的值是10。
   • function foo() { ... }：这行是声明，在创建阶段已处理完毕，执行阶段不做任何事。
   • console.log(foo);：foo的值仍然是10。

示例 3.2.3：嵌套函数声明的提升

function outer() {
    inner(); // 输出: Inner function called.

    function inner() {
        console.log("Inner function called.");
    }
}
outer();

// inner(); // ReferenceError: inner is not defined (因为inner只在outer函数作用域内提升)

解析：

inner函数声明被提升到outer函数的词法环境顶部。因此，在outer函数内部，inner函数可以在其声明之前被调用。但在outer函数外部，inner是不可见的。

3.3 总结 函数声明的提升

特性	描述
提升行为	整个函数体都被提升到其作用域（函数或全局）的顶部。
初始化	在提升时，函数名直接绑定到实际的函数对象。
作用域	函数作用域（Function Scope）或全局作用域（Global Scope）。
重复声明	在严格模式下，重复的函数声明可能会导致错误或警告。在非严格模式下，后面的声明会覆盖前面的。
访问时机	在声明之前就可以完全访问并调用。
优先级	通常高于var变量声明。

---

四、 函数表达式的非提升性

与函数声明不同，函数表达式（Function Expression）并不会将整个函数体提升。它们遵循变量的提升规则。

4.1 函数表达式的机制

函数表达式是将一个函数赋值给一个变量。其提升行为取决于用于声明该变量的关键字（var、let、const）。

• 如果使用 var 声明：变量名会被提升并初始化为undefined。函数体在赋值操作执行之前不可用。
• 如果使用 let 或 const 声明：变量名会被提升，但处于暂时性死区（Temporal Dead Zone, TDZ），在赋值操作执行之前不可用。

4.2 代码示例与解析

示例 4.2.1：使用 var 的函数表达式

// greet(); // TypeError: greet is not a function (因为此时greet是undefined)
console.log(greet); // 输出: undefined

var greet = function() {
    console.log("Hello from function expression!");
};

greet(); // 输出: Hello from function expression!

解析：

1. 创建阶段： var greet = function() { ... }; 中的greet变量被提升到全局作用域顶部，并初始化为undefined。
2. 执行阶段：
   • 尝试调用greet()时，greet的值是undefined，undefined不是一个函数，所以抛出TypeError。
   • console.log(greet); 输出undefined。
   • var greet = function() { ... }; 执行时，greet被赋值为函数对象。
   • greet(); 正常调用函数。

示例 4.2.2：具名函数表达式

var factorial = function calculate(n) {
    if (n <= 1) return 1;
    return n * calculate(n - 1);
};

// console.log(calculate); // ReferenceError: calculate is not defined
// calculate(5); // ReferenceError: calculate is not defined

console.log(factorial(5)); // 输出: 120

解析：

这里的calculate是一个具名函数表达式的名称。这个名称只在函数体内部有效，用于递归调用等。它不会被提升到外部作用域。外部作用域只能通过factorial这个变量名来访问这个函数。

4.3 总结 函数表达式的行为

函数表达式的提升行为与普通变量的提升行为一致，这取决于声明变量的关键字。它们不会像函数声明那样，将整个函数体提升并立即可用。

---

五、 let 和 const：块级作用域与暂时性死区（TDZ）

ES6引入的let和const关键字是为了解决var的一些设计缺陷，特别是其函数作用域和意外提升行为。let和const引入了块级作用域（Block Scope），并且它们的提升行为更加严格，引入了暂时性死区（Temporal Dead Zone, TDZ）的概念。

5.1 let 和 const 的提升机制

尽管let和const通常被描述为“不提升”，但这是一种误解。实际上，它们的声明也会被提升到其所在块级作用域的顶部。但是，与var不同的是，它们在提升时不会被初始化。

从块的开始到let或const声明的那一行之间，变量处于一个特殊的区域，被称为暂时性死区（TDZ）。在这个区域内尝试访问变量，会立即抛出ReferenceError。变量只有在执行到声明那一行时才会被初始化（let初始化为undefined，const初始化为其赋值）。

5.2 块级作用域

let和const声明的变量只在它们被声明的代码块内有效。一个代码块由花括号 {} 定义，例如if语句、for循环、while循环、函数体等。

if (true) {
    let blockVar = "I am block-scoped";
    console.log(blockVar); // 输出: I am block-scoped
}
// console.log(blockVar); // ReferenceError: blockVar is not defined

5.3 代码示例与解析

示例 5.3.1：let 的暂时性死区

// console.log(myLetVar); // ReferenceError: Cannot access 'myLetVar' before initialization
let myLetVar = 20;
console.log(myLetVar); // 输出: 20

解析：

1. 创建阶段： let myLetVar = 20; 中的myLetVar被提升到当前（全局）词法环境的顶部。但它没有被初始化。
2. 执行阶段：
   • console.log(myLetVar); 尝试访问myLetVar。由于myLetVar处于TDZ中（它已被声明但未初始化），JavaScript引擎抛出ReferenceError。
   • 当代码执行到let myLetVar = 20;时，myLetVar被初始化为undefined，然后被赋值为20。
   • console.log(myLetVar); 正常输出20。

示例 5.3.2：const 的暂时性死区

const的行为与let非常相似，唯一的区别是const声明的变量必须在声明时初始化，且不能被重新赋值。

// console.log(myConstVar); // ReferenceError: Cannot access 'myConstVar' before initialization
const myConstVar = 30;
console.log(myConstVar); // 输出: 30

// myConstVar = 40; // TypeError: Assignment to constant variable.

解析：

与let一样，myConstVar在声明前访问会触发TDZ的ReferenceError。一旦声明并初始化，它的值就不能改变。

示例 5.3.3：循环中的 let (var 陷阱的解决方案)

for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 100);
}
// 输出:
// 0 (约100ms后)
// 1 (约100ms后)
// 2 (约100ms后)

解析：

let在这里解决了var的循环陷阱。由于let具有块级作用域，每次循环迭代都会创建一个新的i变量绑定。setTimeout的回调函数会捕获并引用它自己迭代的i的值。

等效的“概念性”代码（更清晰地展示每次迭代的独立性）：

// 伪代码，展示let在每次迭代中创建独立i的机制
// 第一次迭代
{
    let i = 0;
    setTimeout(function() {
        console.log(i); // 0
    }, 100);
}
// 第二次迭代
{
    let i = 1;
    setTimeout(function() {
        console.log(i); // 1
    }, 100);
}
// 第三次迭代
{
    let i = 2;
    setTimeout(function() {
        console.log(i); // 2
    }, 100);
}

示例 5.3.4：在嵌套块中访问 let 变量

let globalLet = "Global";

if (true) {
    // console.log(globalLet); // 访问外部作用域的 globalLet
    let blockLet = "Block";
    console.log(globalLet); // 输出: Global
    console.log(blockLet);  // 输出: Block

    if (true) {
        // console.log(blockLet); // 访问外部块作用域的 blockLet
        let nestedBlockLet = "Nested Block";
        console.log(blockLet);        // 输出: Block
        console.log(nestedBlockLet);  // 输出: Nested Block
    }
    // console.log(nestedBlockLet); // ReferenceError: nestedBlockLet is not defined
}
// console.log(blockLet); // ReferenceError: blockLet is not defined

解析：

这展示了let的块级作用域以及词法环境的嵌套。内部块可以访问外部块的变量，但外部块不能访问内部块的变量。每个块都有自己的词法环境。

5.4 let 和 const 的重复声明

let和const不允许在同一作用域内重复声明同一个变量。

let myName = "Alice";
// let myName = "Bob"; // SyntaxError: Identifier 'myName' has already been declared

const PI = 3.14;
// const PI = 3.14159; // SyntaxError: Identifier 'PI' has already been declared

这避免了var在重复声明时可能导致的意外覆盖问题，使得代码更加健壮。

5.5 总结 let 和 const 的提升与TDZ

特性	var	let/const
提升行为	声明被提升。	声明被提升。
初始化	提升时初始化为 undefined。	提升时不初始化，进入暂时性死区（TDZ）。
访问时机	声明前可访问，值为 undefined。	声明前访问会抛出 ReferenceError (TDZ)。
作用域	函数作用域或全局作用域。	块级作用域。
重复声明	允许，会覆盖。	不允许，抛出 SyntaxError。
全局对象	全局作用域声明的变量会成为全局对象的属性。	全局作用域声明的变量不会成为全局对象的属性。

---

六、 Class 的提升：类声明与类表达式

ES6引入的class关键字用于创建类。与函数类似，类也有声明和表达式两种形式，它们的提升行为也不同。

6.1 类声明（Class Declaration）的提升

类声明的提升行为类似于let和const：它们会被提升，但处于暂时性死区（TDZ）。在类声明被求值之前，尝试访问它会导致ReferenceError。

// console.log(MyClass); // ReferenceError: Cannot access 'MyClass' before initialization

class MyClass {
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log(this.name);
    }
}

const obj = new MyClass("Alice");
obj.sayName(); // 输出: Alice

解析：

MyClass类名被提升，但其在声明之前处于TDZ。在执行到class MyClass { ... }这一行之前，MyClass是不可用的。

6.2 类表达式（Class Expression）的非提升性

类表达式与函数表达式类似，其提升行为取决于赋值给它的变量声明关键字。

// console.log(AnotherClass); // ReferenceError: Cannot access 'AnotherClass' before initialization
// const obj2 = new AnotherClass(); // ReferenceError

const AnotherClass = class {
    constructor(id) {
        this.id = id;
    }
};

const obj2 = new AnotherClass(1);
console.log(obj2.id); // 输出: 1

// 具名类表达式，名称只在类内部可见
const YetAnotherClass = class MyNamedClass {
    constructor() {
        // console.log(MyNamedClass); // 可以在这里访问MyNamedClass
    }
};
// console.log(MyNamedClass); // ReferenceError: MyNamedClass is not defined

解析：

AnotherClass变量的提升行为由const决定，因此它也存在TDZ。YetAnotherClass中的MyNamedClass名称只在类内部可见，不会被提升到外部作用域。

6.3 总结 Class 的提升

类型	提升行为	初始化及访问时机
类声明	提升到块作用域顶部。	处于TDZ，声明前访问抛出 ReferenceError。
类表达式	变量名提升（取决于 var/let/const），类体不提升。	变量提升规则决定，通常也伴随TDZ（let/const）。

---

七、 深入理解词法环境与作用域链

Hoisting的背后机制是词法环境的创建和作用域链的构建。让我们再次回到词法环境，更深入地探讨它如何协同工作。

7.1 词法环境的创建时机

每当JavaScript引擎进入一个新的执行上下文（全局、函数、eval）或一个新的块（对于let/const），它都会创建一个新的词法环境。这个词法环境的创建发生在执行上下文的创建阶段。

7.2 词法环境的类型

• 全局词法环境（Global Lexical Environment）：

  • 在全局执行上下文创建时生成。
  • 其环境记录包含所有全局变量（var、let、const）和函数声明。
  • var声明和函数声明还会同时作为全局对象的属性。
  • 其外部词法环境引用为null。

• 函数词法环境（Function Lexical Environment）：

  • 在函数执行上下文创建时生成。
  • 其环境记录包含函数参数、函数内部的var、let、const声明和函数声明。
  • 其外部词法环境引用指向函数被“定义”时所在的作用域的词法环境（而非函数被“调用”时的作用域）。这就是词法作用域（Lexical Scoping）的本质，也是闭包能够工作的基础。

• 块级词法环境（Block Lexical Environment）：

  • 在进入包含let或const声明的块时创建。
  • 其环境记录包含块内部的let和const声明。
  • 其外部词法环境引用指向包含它的词法环境。

7.3 Hoisting 与词法环境的绑定过程

以下表格总结了不同声明类型在词法环境创建阶段的绑定方式：

声明类型	绑定到环境记录的时机	初始值	TDZ 行为？	全局作用域下是否绑定到全局对象？
var 变量	创建阶段	undefined	否	是
函数声明	创建阶段	函数对象	否	是
let 变量	创建阶段	未初始化	是	否
const 变量	创建阶段	未初始化	是	否
类声明 (class)	创建阶段	未初始化	是	否
function* (生成器)	创建阶段	生成器函数对象	否	是

示例：深入剖析词法环境的变化

let globalVar = "Global";

function outer() {
    let outerVar = "Outer";

    function inner() {
        let innerVar = "Inner";
        console.log(globalVar, outerVar, innerVar);
    }

    inner();
}

outer();

词法环境链条（简化版）：

1. 全局执行上下文创建阶段：

   • 创建 全局词法环境。
   • 环境记录：globalVar: <未初始化>，outer: <函数对象>
   • 在执行到 let globalVar = "Global"; 后：globalVar: "Global"

2. outer() 函数执行上下文创建阶段：

   • 创建 outer 函数词法环境。
   • 外部词法环境引用：指向 全局词法环境。
   • 环境记录：outerVar: <未初始化>，inner: <函数对象>
   • 在执行到 let outerVar = "Outer"; 后：outerVar: "Outer"

3. inner() 函数执行上下文创建阶段：

   • 创建 inner 函数词法环境。
   • 外部词法环境引用：指向 outer 函数词法环境。（注意：是inner定义时的环境，即outer函数内部）
   • 环境记录：innerVar: <未初始化>
   • 在执行到 let innerVar = "Inner"; 后：innerVar: "Inner"

4. inner() 执行阶段，查找变量：

   • 查找 globalVar：在 inner 词法环境找不到，沿着外部引用到 outer 词法环境，找不到，再沿着外部引用到 全局词法环境，找到 globalVar: "Global"。
   • 查找 outerVar：在 inner 词法环境找不到，沿着外部引用到 outer 词法环境，找到 outerVar: "Outer"。
   • 查找 innerVar：在 inner 词法环境 找到 innerVar: "Inner"。

这就是作用域链如何通过词法环境的外部引用机制，实现变量查找的过程。Hoisting确保了在执行阶段开始之前，这些环境记录已经被正确地填充了声明信息。

---

八、 Hoisting 的优先级与复杂场景

当同一作用域内存在多种声明类型且名称冲突时，Hoisting的优先级变得尤为重要。

8.1 优先级规则

在同一作用域内，通常遵循以下优先级（从高到低）：

1. 函数声明 (Function Declaration)
2. var 变量声明

let/const/class 声明由于其TDZ特性和不允许重复声明的规则，与var/函数声明混合时会导致不同的结果。

8.2 代码示例与解析

示例 8.2.1：函数声明与 var 变量（再次强调）

console.log(myIdentifier); // 输出: [Function: myIdentifier]
myIdentifier();            // 输出: From function
var myIdentifier = "Hello";
console.log(myIdentifier); // 输出: Hello

function myIdentifier() {
    console.log("From function");
}
console.log(myIdentifier); // 输出: Hello

解析：

在创建阶段，函数声明优先于var声明。myIdentifier首先被绑定为函数，var声明在处理时发现同名标识符已存在，便跳过其初始化，但仍保留其赋值操作。

示例 8.2.2：函数声明与 let/const 变量冲突

// function conflict() {
//     console.log(x); // ReferenceError (TDZ for let)
//     let x = 1;
//     function x() {} // SyntaxError: Identifier 'x' has already been declared
// }
// conflict();

// function conflict2() {
//     const y = 1;
//     function y() {} // SyntaxError: Identifier 'y' has already been declared
// }
// conflict2();

解析：

let和const不允许与同一作用域内的任何其他声明（包括函数声明）重复声明。这会导致SyntaxError。这进一步强调了let和const的严格性，旨在减少潜在的错误。

如果函数声明和let/const声明在不同的块作用域内，则不会冲突。

function example() {
    function greet() { console.log("Hello from function"); }
    {
        let greet = "Hello from let"; // 块级作用域内的独立 greet
        console.log(greet); // 输出: Hello from let
    }
    console.log(greet); // 输出: [Function: greet]
}
example();

这里没有冲突，因为let greet是在一个不同的块级作用域内声明的，它有自己的词法环境。

示例 8.2.3：函数声明在块级作用域内的行为（非严格模式）

在非严格模式下，块级作用域内的函数声明行为可能会有些“奇怪”，并且在不同浏览器和ES版本中表现不一致，ES6规范对此进行了明确，但为了兼容性，浏览器可能仍有遗留行为。强烈建议在块级作用域内使用函数表达式（let/const）而不是函数声明。

if (true) {
    foo(); // 在某些旧浏览器或非严格模式下可能有效，输出 "Hi"，但在现代严格模式下可能 ReferenceError 或 TypeError
    function foo() {
        console.log("Hi");
    }
}
// foo(); // ReferenceError: foo is not defined (通常情况下，foo只在if块内有效)

解析：

在严格模式下，块级作用域的函数声明行为更趋向于let，即它们也是块级作用域的，并且在块外部不可访问。但在非严格模式下，为了兼容旧代码，一些JavaScript引擎可能会将其提升到包含块的函数作用域（或全局作用域），导致一些意外行为。最佳实践是避免在块级作用域内使用函数声明。

8.3 var 变量与函数表达式的优先级

这本质上是var变量的优先级问题。

console.log(myFunc); // undefined

var myFunc = function() {
    console.log("Hello");
};

console.log(myFunc); // [Function: myFunc]

解析：

myFunc作为var变量被提升，初始化为undefined。在赋值之前，它就只是一个undefined的变量。

---

九、 Hoisting 的实际意义与最佳实践

理解Hoisting不仅仅是满足好奇心，它对我们日常编写JavaScript代码有着实际的指导意义。

9.1 Hoisting 的实际影响

• 代码可读性与维护性：var的提升行为可能导致变量在声明前被访问，其值为undefined，这可能导致难以追踪的bug。函数声明的完全提升则相对直观。
• 闭包行为：var在循环中的闭包陷阱是由于其函数作用域和提升特性导致的，let则通过块级作用域完美解决了这个问题。
• 避免意外的全局变量：在函数内部不使用var、let、const声明的变量会默认成为全局变量（在非严格模式下），这与Hoisting无关，但两者都可能导致作用域污染。

9.2 最佳实践

1. 始终优先使用 let 和 const：

   • 它们引入了块级作用域，使代码更具可预测性。
   • 它们的TDZ特性强制你先声明后使用，避免了var变量在声明前值为undefined的困惑。
   • const强调变量的不可变性（对于原始值）或引用的不可变性（对于对象），有助于编写更安全的代码。
   • 只有当你确实需要一个可能被重新赋值的变量时才使用let，否则优先使用const。

2. 将所有的 var、let、const 声明放在其作用域的顶部：

   • 尽管Hoisting（尤其是var和函数声明）意味着你可以在声明前使用它们，但显式地将声明放在作用域的顶部会极大地提高代码的可读性。
   • 这使得变量的声明位置一目了然，避免了在代码中四处寻找声明的麻烦。
   • 对于let和const，这样做还可以有效地减少TDZ的影响，因为你总是先声明再使用。

3. 避免在块级作用域内使用函数声明（尤其是在非严格模式下）：

   • 在块级作用域内，function声明的行为在ES5和ES6之间有所不同，并且在不同JavaScript引擎中可能存在差异。为了避免不一致的行为和潜在的bug，请始终使用函数表达式（例如const myFunc = function() { ... } 或箭头函数 const myArrowFunc = () => { ... }）。

4. 理解 Hoisting 的概念，但不要依赖它的行为：

   • Hoisting是JavaScript引擎的内部机制，理解它有助于调试和理解语言的深层原理。
   • 然而，刻意利用var或函数声明的提升特性来编写代码，通常会导致代码难以理解和维护。

---

十、 对 JavaScript 声明机制的宏观认识

JavaScript的Hoisting机制是其动态性和灵活性的一个体现，它允许开发者以相对宽松的方式组织代码。然而，随着语言的发展，特别是ES6的引入，我们看到了向更严格、更可预测的声明行为的转变。let、const和class的引入，以及暂时性死区的概念，正是为了弥补var和早期函数声明的一些不足，使JavaScript在大型项目和团队协作中更易于管理和维护。

通过深入理解词法环境的创建过程、不同声明类型的提升行为及其背后的原理，我们不仅能够写出没有意外行为的代码，更能洞察JavaScript引擎如何解释和执行我们的程序。这无疑是迈向高级JavaScript开发者的重要一步。