js变量提升原理（变量和函数表达式的区别）

在JavaScript中，变量提升（Variable Hoisting）是指无论在代码的何处声明变量（使用var关键字），这些变量的声明都会被移动到当前作用域的顶部。这意味着变量可以在声明之前使用，而不会抛出引用错误，但只有变量的声明被提升，赋值并没有被提升。

1、变量提升实例：

console.log(myVar); // 输出: undefined，而不是引用错误
var myVar = 10;
console.log(myVar); // 输出: 10

在这个例子中，尽管`myVar`是在代码的中间声明的，但它的声明（但不是赋值）被提升到了函数或全局作用域的顶部。因此，第一次console.log输出undefined而不是一个引用错误。

2、变量提升的工作原理

当JavaScript引擎解析代码时，会首先处理所有的变量声明。这就意味着，变量的声明（不是初始化或赋值）会在代码执行之前完成。这就是为什么可以在变量声明之前访问到变量，但它们的值会是undefined。

3、函数提升

类似地，函数声明也会被提升，但函数表达式则不会。

console.log(myFunc()); // 输出: "Hello, World!"
function myFunc() {
return "Hello, World!";
}

在这个例子中，myFunc函数在调用之前就已经被提升和可用了。

4、变量和函数表达式的区别

使用let和const声明的变量不会发生完整的变量提升。它们的类型会被提升，但是它们不会立即被赋值，这被称为“暂时性死区”（Temporal Dead Zone）。

console.log(myLetVar); // 抛出引用错误
let myLetVar = 10;

对于函数表达式，只有函数名被提升，而不是函数体。

console.log(myFuncExpr); // 输出: undefined
var myFuncExpr = function() {
return "Hello, World!";
};

在这个例子中，变量myFuncExpr被提升，但是它被初始化为undefined，直到函数表达式被完全赋值。

4、结论

理解变量提升对于编写清晰和可预测的JavaScript代码非常重要。使用let和const可以帮助避免一些与变量提升相关的问题，并且通常推荐使用这些关键字来声明变量，而不是使用var。