JavaScript变量提升与函数提升详解

"JS变量提升及函数提升实例解析" JavaScript中的变量提升（Hoisting）和函数提升是理解JS代码执行机制的关键概念。这两者都与JS的预解析阶段有关，这个阶段发生在代码实际执行之前。 1. **作用域**： - **全局作用域**：在所有函数外部定义的变量和函数，可以在整个代码中被访问。 - **函数作用域**：在函数内部定义的变量和函数，只能在其所在的函数内部被访问。在ES6之前，JS不支持块级作用域，如`if`语句或`for`循环内的变量实际上是在其最近的函数作用域内声明的。 2. **变量提升**： - 在预解析阶段，JS解析器会查找所有的`var`声明的变量和函数声明，将它们移动到它们所在的作用域顶部，但不包括赋值操作。这意味着，尽管变量在代码中出现在某个位置，但在执行时，它的声明已经被“提升”到了作用域顶部。 - 变量可以在声明之前使用，此时其值为`undefined`。例如： ```javascript console.log(a); // undefined var a = 10; ``` 这等同于： ```javascript var a; console.log(a); // undefined a = 10; ``` 3. **函数提升**： - 函数声明（`function foo() {}`）不仅声明会被提升，其定义也会被提升，使得函数在整个作用域内都可以被调用，即使在声明之前。 - 函数表达式（如`var foo = function() {}`）则不会提升，因为它是变量的赋值操作，而不是函数声明。 - 当函数声明和变量声明重名时，函数声明的优先级更高，变量声明会被忽略。例如： ```javascript foo(); // 输出 'Hello' var foo = function() { return 'World'; }; function foo() { return 'Hello'; } ``` 输出将是'Hello'，因为函数声明被提升了。 4. **示例分析**： - 当有多个`var`声明同一个变量时，只有第一个声明会被提升，后面的会被忽略。 - 对于函数表达式声明的函数，例如`var bar = function baz() {}`，`baz`不会被提升，只能在声明之后调用。 了解变量提升和函数提升对于编写可预测的JS代码至关重要。在编写代码时，避免依赖这些特性以提高代码的清晰度和可维护性。在现代JS中，使用`let`和`const`（ES6引入的块级作用域）可以帮助减少因变量提升带来的问题。同时，尽量使用函数表达式而不是函数声明，除非确实需要在函数声明之前调用该函数。