JS 中的变量和函数提升

概述

谁会发生提升现象？

• 使用 var 声明的变量，发生变量提升 (Variable Hoisting)
• 使用函数声明形式定义的函数，发生函数提升 (Function Hoisting)

函数声明和函数表达式

函数声明 (Function Declarations)：
function sayHello() { console.log("你好，函数声明！"); }
函数表达式 (Function Expressions)：
var greet = function() { console.log("你好，函数表达式！"); };

提升的注意点

1. 只提升到当前作用域的顶部
2. 只提升声明，不提升赋值。

当你使用 var 声明一个变量时，它的声明会被提升到当前作用域的顶部，并且会自动初始化为 undefined。

详细区别

声明方式	提升行为	初始化状态 (提升后，声明前)
var 变量	声明提升，赋值不提升	undefined
let 变量	声明提升，赋值不提升，存在暂时性死区 (TDZ)	TDZ (不可访问)
const 变量	声明提升，赋值不提升，存在暂时性死区 (TDZ)	TDZ (不可访问)
函数声明	整个函数 (名称和函数体) 提升	可直接调用
函数表达式 (var)	变量声明提升，函数体赋值不提升	undefined (变量)
函数表达式 (let/const)	变量声明提升，函数体赋值不提升，存在暂时性死区 (TDZ) for the variable	TDZ (变量不可访问)

现象原因

提升现象的根源在于 JavaScript 引擎处理代码的两个主要阶段：

1. 编译阶段 (Compilation Phase)：在这个阶段，引擎会扫描代码，找出所有的声明（变量和函数），并在内存中为它们设置好作用域。这就是“提升”发生的地方。
2. 执行阶段 (Execution Phase)：在这个阶段，代码才会真正被执行，赋值操作等会在这时进行。

开发实践建议

• 始终在作用域顶部声明变量和函数：虽然 JavaScript 有提升特性，但为了代码的可读性和可维护性，养成在使用变量或函数之前先声明它们的好习惯。这样可以避免很多由提升引起的困惑。
• 优先使用 let 和 const：它们引入了块级作用域和暂时性死区的概念，有助于编写更健壮、更易于理解的代码，并能帮助你避免一些 var 带来的常见错误。