深入探讨 JavaScript Hoisting (变量提升) 的原理，以及 var, let, const, function 声明的提升行为差异。

各位观众老爷，大家好！我是今天的主讲人，咱们今天聊点儿 JavaScript 的“鬼故事”——变量提升（Hoisting）。听着挺吓人，其实就是 JavaScript 引擎在背后耍了点小花招。

开场白：JavaScript 的“先斩后奏”

话说江湖上有这么一个门派，叫 JavaScript。这个门派里有个奇怪的规矩，那就是在执行代码之前，它会先默默地把所有的变量和函数声明“提升”到当前作用域的顶部。这就像皇帝先拟好了圣旨，但还没正式颁布，就已经在心里默念了一遍。

这种“先斩后奏”的行为，就是我们今天要深入探讨的 Hoisting。它既能让代码更灵活，也可能让你掉进坑里。所以，今天咱们就来好好扒一扒 Hoisting 的底裤，看看它到底是怎么运作的。

第一章：何为 Hoisting？提升的本质

Hoisting 不是物理上的移动，而是 JavaScript 引擎在编译阶段的一种优化行为。想象一下，引擎就像一个勤劳的园丁，在执行代码之前，它会先扫描一遍代码，把所有的变量和函数声明“登记”在册，然后才开始一行一行地执行。

这个“登记”的过程，就是 Hoisting 的本质。它并不会把变量的值也一起提升，只会提升声明。也就是说，变量会先被赋予 undefined，函数声明则会被提升到整个函数体。

第二章：Var 的“大喇叭”式提升

var 声明的变量，是 Hoisting 行为的典型代表。它就像一个大喇叭，把变量名广播到整个作用域，但却没有告诉大家这个变量的值。

console.log(x); // 输出：undefined
var x = 10;
console.log(x); // 输出：10

在这个例子中，虽然 var x = 10; 出现在 console.log(x); 之后，但由于 Hoisting 的作用，x 变量已经被提升到作用域顶部，只是它的值还没有被赋值，所以输出 undefined。

相当于引擎在背后默默地做了这些：

var x; // 声明提升，值为 undefined
console.log(x);
x = 10; // 赋值
console.log(x);

所以，使用 var 声明变量时，要特别注意，如果在使用变量之前没有赋值，就会得到 undefined。

第三章：Let 和 Const 的“冷酷无情”提升

let 和 const 声明的变量，虽然也会被提升，但它们的行为却和 var 大相径庭。它们就像两个高冷的家伙，虽然存在于作用域中，但在声明之前访问它们，就会抛出一个错误：ReferenceError: Cannot access 'variable' before initialization。

这个区域被称为“暂时性死区”（Temporal Dead Zone，简称 TDZ）。你可以把它想象成一个禁区，在变量声明之前，任何人都不能访问它。

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

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

let 和 const 的 TDZ 机制，可以有效地避免一些潜在的错误。它强制开发者在使用变量之前必须先声明，从而提高代码的可读性和可维护性。

第四章：函数声明 vs. 函数表达式的“待遇差别”

函数声明和函数表达式在 Hoisting 方面的表现也不同。

• 函数声明（Function Declaration）：

  函数声明会被完全提升，包括函数名和函数体。这意味着你可以在函数声明之前调用它。

  sayHello(); // 输出：Hello!
  
  function sayHello() {
    console.log("Hello!");
  }

  这相当于引擎做了如下处理：

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

• 函数表达式（Function Expression）：

  函数表达式的提升行为与 var 声明的变量类似，只会提升变量名，而不会提升函数体。这意味着你只能在函数表达式赋值之后才能调用它。

  sayGoodbye(); // 抛出 TypeError: sayGoodbye is not a function
  
  var sayGoodbye = function() {
    console.log("Goodbye!");
  };
  
  sayGoodbye(); // 输出：Goodbye!

  这里，sayGoodbye 变量被提升了，但它的值是 undefined，所以在调用它时会抛出 TypeError。

  相当于引擎做了如下处理：

  var sayGoodbye; // 声明提升，值为 undefined
  sayGoodbye(); // TypeError: sayGoodbye is not a function
  sayGoodbye = function() {
    console.log("Goodbye!");
  };
  sayGoodbye();

第五章：Hoisting 的优先级：谁说了算？

当同一个作用域中同时存在变量声明和函数声明时，Hoisting 的优先级会如何呢？答案是：函数声明的优先级高于变量声明。

var myVar = "outer";

function myFunc() {
  console.log(myVar); // 输出：undefined
  var myVar = "inner";
  console.log(myVar); // 输出：inner
}

myFunc();
console.log(myVar); // 输出：outer

在这个例子中，myFunc 函数内部也有一个 var myVar 声明，它会覆盖外部的 myVar 声明，但由于 Hoisting 的作用，内部的 myVar 声明会被提升到函数顶部，但赋值操作仍然在 console.log(myVar); 之后执行，所以第一个 console.log(myVar); 输出的是 undefined。

如果把 var myVar = "inner" 改为 let myVar = "inner"，结果就会大不相同：

var myVar = "outer";

function myFunc() {
  console.log(myVar); // 抛出 ReferenceError: Cannot access 'myVar' before initialization
  let myVar = "inner";
  console.log(myVar);
}

myFunc();
console.log(myVar); // 输出：outer

由于 let 的 TDZ 机制，在 let myVar = "inner" 声明之前访问 myVar 会抛出 ReferenceError。

第六章：全局作用域下的 Hoisting

在全局作用域下，Hoisting 的行为也需要注意。使用 var 声明的全局变量会被添加到 window 对象上（在浏览器环境中），而使用 let 或 const 声明的全局变量则不会。

var globalVar = "global";
console.log(window.globalVar); // 输出：global

let globalLet = "global let";
console.log(window.globalLet); // 输出：undefined

const globalConst = "global const";
console.log(window.globalConst); // 输出：undefined

这意味着，如果你想在全局作用域下声明一个变量，并希望它能被其他脚本访问，可以使用 var。但如果你只是想在当前脚本中使用一个全局变量，建议使用 let 或 const，以避免污染全局命名空间。

第七章：闭包与 Hoisting 的“爱恨情仇”

闭包和 Hoisting 经常一起出现，它们之间的关系既密切又复杂。

function createCounter() {
  var count = 0;
  return function() {
    return ++count;
  };
}

var counter1 = createCounter();
var counter2 = createCounter();

console.log(counter1()); // 输出：1
console.log(counter1()); // 输出：2
console.log(counter2()); // 输出：1
console.log(counter2()); // 输出：2

在这个例子中，createCounter 函数返回一个闭包，这个闭包可以访问 createCounter 函数内部的 count 变量。由于 Hoisting 的作用，count 变量被提升到 createCounter 函数的顶部，但它的值仍然是 0。每次调用闭包时，都会对 count 变量进行递增操作，从而实现计数器的功能。

第八章：总结与最佳实践

特性	var	let	const	函数声明	函数表达式
作用域	函数作用域	块级作用域	块级作用域	函数作用域	取决于表达式所处的上下文
Hoisting	声明和赋值都提升，值为 undefined	声明提升，存在 TDZ	声明提升，存在 TDZ	声明和函数体都提升	变量声明提升，值为 undefined，函数体不提升
重复声明	允许	不允许	不允许	允许	取决于变量声明方式
修改变量值	允许	允许	不允许	N/A	N/A

通过今天的学习，我们对 JavaScript 的 Hoisting 机制有了更深入的了解。为了避免 Hoisting 带来的潜在问题，建议遵循以下最佳实践：

1. 始终在使用变量之前声明它。 这可以避免 undefined 错误和 ReferenceError。
2. 尽量使用 let 和 const 声明变量。 它们可以提供更严格的作用域规则，并避免变量污染。
3. 避免在同一个作用域中重复声明变量。 这会导致代码难以理解和维护。
4. 注意函数声明和函数表达式的区别。 函数声明会被完全提升，而函数表达式只会提升变量名。
5. 理解闭包和 Hoisting 之间的关系。 闭包可以访问外部函数的作用域，但需要注意 Hoisting 带来的影响。

第九章：Hoisting 的 “黑魔法” – ES6 的 Class

ES6 引入的 class 关键字，本质上仍然是语法糖，它并没有改变 JavaScript 基于原型的继承机制。但是，class 的 Hoisting 行为却有一些特殊之处。

// const myClass = new MyClass(); // 抛出 ReferenceError: Cannot access 'MyClass' before initialization

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const myClass = new MyClass("Alice");
myClass.sayHello(); // 输出：Hello, my name is Alice

虽然 class 也存在 Hoisting 行为，但与 let 和 const 类似，它也存在 TDZ。这意味着你必须在 class 声明之后才能使用它。如果在声明之前使用 class，就会抛出一个 ReferenceError。

这与函数声明有所不同，函数声明可以在声明之前被调用。之所以 class 有这样的限制，是为了避免在 class 初始化之前访问其属性和方法，从而保证代码的正确性。

第十章：实际案例分析

为了更好地理解 Hoisting 的应用，我们来看几个实际案例：

案例 1：循环中的闭包

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出：5 5 5 5 5
  }, 1000);
}

在这个例子中，我们期望输出 0, 1, 2, 3, 4，但实际上却输出了 5 个 5。这是因为 var 声明的 i 变量在循环结束后才被赋值为 5，而 setTimeout 中的函数会在 1 秒后执行，此时 i 的值已经变成了 5。

要解决这个问题，可以使用 let 声明 i 变量：

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出：0 1 2 3 4
  }, 1000);
}

或者使用闭包：

for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 输出：0 1 2 3 4
    }, 1000);
  })(i);
}

案例 2：条件语句中的变量声明

function myFunction(condition) {
  if (condition) {
    var x = 100;
  }

  console.log(x); // 如果 condition 为 true，输出 100；否则输出 undefined
}

myFunction(true);  // 输出 100
myFunction(false); // 输出 undefined

由于 var 的 Hoisting 机制，x 变量会被提升到 myFunction 函数的顶部，但只有在 condition 为 true 时才会赋值。如果 condition 为 false，x 的值仍然是 undefined。

案例 3：函数内部的变量覆盖

var outerVar = "outer";

function myFunc() {
  console.log(outerVar); // 输出：undefined
  var outerVar = "inner";
  console.log(outerVar); // 输出：inner
}

myFunc();
console.log(outerVar); // 输出：outer

在这个例子中，函数 myFunc 内部声明了一个与全局变量 outerVar 同名的变量。由于 Hoisting 的作用，函数内部的 outerVar 变量会被提升到函数顶部，但它的值在 console.log(outerVar) 之前还没有被赋值，所以第一个 console.log(outerVar) 输出的是 undefined。

总结：与 Hoisting 和谐共处

Hoisting 是 JavaScript 的一个重要特性，理解它的原理可以帮助我们编写更健壮、更可维护的代码。通过遵循最佳实践，我们可以避免 Hoisting 带来的潜在问题，并充分利用它的优势。

希望今天的分享能帮助大家更好地理解 JavaScript 的 Hoisting 机制。 谢谢大家！ 散会！