JavaScript声明提升详解
深入理解JavaScript中的变量声明提升、函数声明提升及其工作原理
什么是声明提升？
声明提升（Hoisting）是JavaScript在代码执行前将变量和函数的声明移动到作用域顶部的过程。
从开发者的角度看，就好像声明被”提升”到了代码的最上面。这使得我们在声明之前就可以使用变量或函数。
重要提示： 只有声明会被提升，初始化/赋值不会被提升。理解这一点很关键！
console.log(name); // 输出: undefined
var name = “小明”;
console.log(name); // 输出: “小明”
var name = “小明”;
console.log(name); // 输出: “小明”
上面的代码实际上被JavaScript引擎理解为：
var name; // 声明被提升
console.log(name); // undefined
name = “小明”; // 赋值保留在原位置
console.log(name); // “小明”
console.log(name); // undefined
name = “小明”; // 赋值保留在原位置
console.log(name); // “小明”
变量声明提升
var 关键字
使用 var 声明的变量会被提升：
// 示例 1: 变量声明提升
console.log(a); // undefined
var a = 10;
console.log(a); // 10
console.log(a); // undefined
var a = 10;
console.log(a); // 10
实际执行流程：
- 声明
var a被提升到作用域顶部 - 初始化时 a 的值为 undefined
- 执行到赋值语句时，a 被赋值为 10
let 和 const 的提升
使用 let 和 const 声明的变量也会被提升，但它们存在”暂时性死区”：
// 示例 2: let 的暂时性死区
console.log(b); // ReferenceError: b is not defined
let b = 20;
console.log(b); // 20
console.log(b); // ReferenceError: b is not defined
let b = 20;
console.log(b); // 20
注意： 在声明之前访问 let 或 const 变量会导致引用错误（ReferenceError），这个区域称为”暂时性死区”（Temporal Dead Zone）。
函数声明提升
函数声明会被整体提升到作用域顶部：
// 示例 3: 函数声明提升
greet(); // 输出: “你好！”
function greet() {
console.log(“你好！”);
}
greet(); // 输出: “你好！”
greet(); // 输出: “你好！”
function greet() {
console.log(“你好！”);
}
greet(); // 输出: “你好！”
函数声明被完全提升，所以我们可以在声明前调用函数。
函数表达式提升
函数表达式的行为与变量声明类似：
// 示例 4: 函数表达式
sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
console.log(“Hello!”);
};
sayHello(); // 输出: “Hello!”
sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
console.log(“Hello!”);
};
sayHello(); // 输出: “Hello!”
实际执行流程：
var sayHello被提升，初始值为 undefined- 调用
sayHello()时它还不是函数，因此抛出类型错误 - 赋值后可以正常调用
箭头函数提升
箭头函数遵循变量提升规则：
// 示例 5: 箭头函数
hello(); // TypeError: hello is not a function
var hello = () => {
console.log(“你好！”);
};
hello(); // 输出: “你好！”
hello(); // TypeError: hello is not a function
var hello = () => {
console.log(“你好！”);
};
hello(); // 输出: “你好！”
声明提升的优先级
当变量和函数同名时，JavaScript会优先提升函数声明：
// 示例 6: 函数优先
console.log(typeof greet); // 输出: “function”
var greet = “Hello”;
function greet() {
console.log(“Hi!”);
}
console.log(typeof greet); // 输出: “string”
console.log(typeof greet); // 输出: “function”
var greet = “Hello”;
function greet() {
console.log(“Hi!”);
}
console.log(typeof greet); // 输出: “string”
实际执行流程：
- 函数声明被提升
- 变量声明被提升（但函数已存在，所以忽略）
- 变量赋值覆盖了函数
多个同名函数的提升
后面的函数声明会覆盖前面的：
// 示例 7: 函数覆盖
foo(); // 输出: “第二个函数”
function foo() {
console.log(“第一个函数”);
}
function foo() {
console.log(“第二个函数”);
}
foo(); // 输出: “第二个函数”
function foo() {
console.log(“第一个函数”);
}
function foo() {
console.log(“第二个函数”);
}
不同声明方式的提升行为对比
| 声明方式 | 是否提升 | 初始值 | 作用域 | 暂时性死区 |
|---|---|---|---|---|
var |
是 | undefined |
函数作用域 | 否 |
let |
是（但不可访问） | 未初始化 | 块级作用域 | 是 |
const |
是（但不可访问） | 未初始化 | 块级作用域 | 是 |
| 函数声明 | 是 | 函数定义 | 块级作用域（严格模式） | 否 |
| 函数表达式 | 变量提升 | undefined |
变量作用域决定 | 取决于变量关键字 |
| 箭头函数 | 变量提升 | undefined |
变量作用域决定 | 取决于变量关键字 |
关键知识点总结
1. 变量提升的本质
JavaScript引擎在代码执行前会扫描整个作用域，将变量和函数声明添加到内存中。
2. 提升的局限性
只有声明会被提升，赋值和初始化操作保留在原位置。
3. 函数声明优先级
函数声明优先级高于变量声明，但变量赋值可以覆盖函数声明。
4. ES6中的变化
let和const存在暂时性死区，在声明前访问会报错，避免了var的意外行为。
5. 最佳实践
总是先声明变量再使用，使用let/const代替var，优先使用函数声明而非表达式。
6. 避免问题的方法
使用严格模式（’use strict’），利用ESLint等工具检测声明问题，模块化代码。