一、核心概念与本质区别
两者均是JavaScript预解析阶段的行为，但提升的内容和优先级不同：
| 类型 | 提升内容 | 提升后状态 |
|---|---|---|
| 变量提升 | 变量声明（var、let、const）被提升到当前作用域顶部。 | - var：声明并初始化为undefined（可在声明前访问）；- let/const：仅声明，未初始化（存在暂时性死区，不可访问）。 |
| 函数提升 | 函数声明（function关键字定义的函数）被提升到当前作用域顶部。 | 函数整体被提升，可在声明前调用。 |
二、执行机制与代码示例
1. 变量提升（以var为例）
代码示例：
console.log(a); // undefined（变量提升，但未赋值）
var a = 10;
console.log(a); // 10
实际执行顺序：
var a; // 提升声明并初始化为undefined
console.log(a); // undefined
a = 10; // 赋值
console.log(a); // 10
2. 函数提升
代码示例：
foo(); // "Hello"（函数可在声明前调用）
function foo() {
console.log("Hello");
}
实际执行顺序：
// 函数整体被提升到顶部
function foo() {
console.log("Hello");
}
foo(); // "Hello"
3. let/const的特殊性（暂时性死区TDZ）
代码示例：
console.log(b); // ReferenceError（TDZ内访问未初始化的变量）
let b = 20;
关键点：
let/const的声明同样被提升，但未初始化，在声明语句前访问会触发TDZ错误；- TDZ范围：从作用域开始到声明语句结束。
三、优先级差异（高频考点）
函数提升优先于变量提升，且函数声明会覆盖同名变量声明（但不会覆盖变量赋值）：
console.log(bar); // [Function: bar]（函数提升优先，变量声明被忽略）
var bar = 10;
console.log(bar); // 10（变量赋值覆盖函数）
function bar() {} // 函数声明
实际执行顺序：
// 1. 函数提升
function bar() {}
// 2. 变量声明（被函数声明覆盖，无效）
// var bar;（忽略，因同名函数已存在）
// 3. 执行代码
console.log(bar); // [Function: bar]
bar = 10; // 变量赋值，覆盖函数
console.log(bar); // 10
四、实际影响与最佳实践
1. 常见问题
-
变量未定义错误（TDZ）：
if (true) { console.log(x); // ReferenceError（TDZ内访问let变量） let x = 10; } -
函数覆盖变量：
var num = 5; function num() {} // 函数声明覆盖变量声明 console.log(num); // [Function: num]
2. 最佳实践
- 优先使用
let/const：避免变量提升导致的未定义错误； - 函数声明放在调用前：提高代码可读性，避免依赖提升机制；
- 避免同名变量和函数：防止覆盖引发的意外行为。
五、问题
1. 问：变量提升和函数提升的区别是什么？
- 答：函数提升优先级更高，且函数整体被提升（可在声明前调用）；变量提升中
var仅初始化为undefined，let/const存在TDZ，不可在声明前访问。
2. 问：var和let的提升有什么不同？
- 答：
var提升后初始化为undefined，可在声明前访问；let提升但未初始化，在声明前访问会触发TDZ错误。
3. 问：以下代码输出什么？为什么？
console.log(a);
var a = 1;
function a() {}
- 答：输出
[Function: a]。因为函数提升优先于变量提升，同名变量声明被忽略，最终a是函数。
总结
“变量提升和函数提升是JavaScript预解析阶段的行为：
- 变量提升：
var声明提升并初始化为undefined，let/const仅声明（存在TDZ）； - 函数提升：整个函数声明被提升，可在声明前调用，且优先级高于变量提升。
实际开发中，应优先使用let/const避免提升带来的问题，同时遵循‘声明在前，使用在后’的原则，提高代码可靠性。例如在模块化开发中，使用ES6模块语法（import/export）可完全避免提升问题。”
