JavaScript变量与函数提升详解

"该文档详细解释了JavaScript中的变量提升（Hoisting）和函数提升的概念，并通过实例进行解析，旨在帮助理解这两个关键特性在JavaScript代码执行过程中的行为。" 在JavaScript中，变量提升和函数提升是两个重要的概念，它们涉及到代码在执行前的预处理阶段，即词法分析阶段。在这个阶段，JavaScript引擎会解析代码并创建一个执行上下文，其中变量声明和函数声明会被提升到其所在作用域的顶部，但赋值操作并不会被提升。 1. 变量提升（Variable Hoisting） 变量提升意味着`var`关键字声明的变量会被提升到当前作用域的顶部，不论这个声明在何处。然而，只声明不赋值，初始值为`undefined`。例如： ```javascript console.log(num); // undefined var num; num = 6; ``` 预编译后，代码实际上变成了： ```javascript var num; console.log(num); // undefined num = 6; ``` 2. 函数声明提升（Function Declaration Hoisting） 函数声明也会被提升，且整个函数体都会被提升，这意味着函数可以在其声明之前调用。例如： ```javascript console.log(square(5)); // 25 function square(n) { return n * n; } ``` 预编译后，代码变成： ```javascript function square(n) { return n * n; } console.log(square(5)); ``` 3. 函数表达式与提升 与函数声明不同，函数表达式（如匿名函数或具名函数表达式）不会被提升。它们仅被视为普通的变量赋值，因此只有赋值操作会在原位置执行。例如： ```javascript console.log(square); // undefined console.log(square(5)); // square is not a function var square = function(n) { return n * n; }; ``` 预编译后，代码看起来像这样： ```javascript var square; console.log(square); console.log(square(5)); square = function(n) { return n * n; }; ``` 4. 函数内部的提升 在函数内部，除了常规的变量和函数声明提升外，还有一种特殊情况。函数声明会被提升到其所在的作用域（包括块级作用域），而函数表达式仍然遵循其正常的赋值规则。例如： ```javascript function bar() { foo(); // 2 var foo = function() { console.log(1); }; foo(); // 1 function foo() { console.log(2); } foo(); // 1 } bar(); ``` 预编译后，`bar()`函数内部的情况变为： ```javascript function bar() { var foo; function foo() { // 内部的函数声明被提升 console.log(2); } foo(); // 2 foo = function() { // 函数表达式赋值 console.log(1); }; foo(); // 1 foo(); // 1 } bar(); ``` 理解变量提升和函数提升对于编写JavaScript代码至关重要，因为它们影响着代码的执行顺序和预期的行为。开发者应避免依赖这种提升行为，而更应该采用明确的声明和初始化来提高代码的可读性和可预测性。在ES6引入了`let`和`const`后，变量提升的行为在块级作用域内已经得到了改变，但仍需了解这一历史特性以正确解析旧代码。