快速入门JavaScript：变量声明 var let const

JavaScript变量声明，有几种不同的方式可以选择。

1. var

ES1（1997年）

var 是 JavaScript 中最古老的声明变量的方法。它被用来声明一个变量，它可以是全局的或者是函数内的。

用法：

var x = 5;

优点：

• 兼容性良好，支持几乎所有的JavaScript引擎和浏览器。
• 可以在变量被声明之前使用（变量提升）。

缺点：

• 变量提升可能导致意外行为。
• 在函数作用域外声明的变量会成为全局变量，容易造成命名冲突和意外的副作用。

浏览器引擎执行方式：
在执行上下文创建阶段，变量声明会被提升到作用域顶部。

2. let

ES6（2015年）

let 是 ES6 新增的声明变量的方式，它引入了块级作用域。

用法：

let y = 10;

优点：

• 不存在变量提升，可以避免意外行为。
• 可以在块级作用域内声明变量，减少了变量泄露的风险。

缺点：

• 不兼容旧版本的浏览器，需要转译成ES5。

浏览器引擎执行方式：
在执行上下文创建阶段，let 声明的变量不会被提升，而是留在其声明的位置。

3. const

ES6（2015年）

const 也是ES6引入的声明变量的方式，它声明一个只读的常量，一旦赋值就不能再修改。

用法：

const PI = 3.14;

优点：

• 提供了更安全的变量声明方式，防止意外的修改。
• 在性能上比var和let更好，因为它可以帮助JavaScript引擎进行更好的优化。

缺点：

• 一旦声明，就无法重新赋值，可能会引发错误。
• 不兼容旧版本浏览器，需要转译。

浏览器引擎执行方式：
与let相似，const声明的变量也不会被提升。

变量提升

变量提升是JavaScript中一个常见的概念，它指的是在执行代码之前，JavaScript引擎会将变量和函数的声明移动到作用域顶部的过程。尽管名为“提升”，但实际上并不是真正将变量的声明和初始化提升到代码的顶部，而是在编译阶段将它们放入内存中，但赋值操作仍然留在原来的位置。变量提升通常容易让人感到困惑，特别是对于初学者来说，因为它似乎违反了代码的执行顺序。

要更详细地了解变量提升，让我们分步骤来看一个例子：

console.log(x); // undefined
var x = 10;
console.log(x); // 10

在这段代码中，我们首先尝试输出变量 x 的值，然后才给 x 赋值，并再次输出 x 的值。

在执行这段代码之前，JavaScript引擎会进行以下操作：

1. 变量声明提升： 在编译阶段，JavaScript引擎会扫描代码，并将所有变量的声明提升到作用域的顶部。这意味着变量 x 的声明会被提升到代码的顶部，但赋值操作仍然留在原来的位置。

2. 赋值操作留在原处： 尽管变量 x 的声明被提升了，但它的赋值操作仍然留在原来的位置。因此，在第一次 console.log(x) 的时候，x 虽然已经被声明，但尚未被赋值，因此输出 undefined。

3. 变量赋值： 在代码执行到赋值语句 var x = 10; 时，变量 x 才被赋予了值 10。

4. 最终输出： 最后一行 console.log(x); 输出变量 x 的值，此时 x 已经被赋值为 10，因此输出 10。

这种变量提升的行为可能会导致在变量声明之前使用变量而不会报错，但是变量的值会是 undefined，这也就是所谓的“暂时性死区”。在暂时性死区中，变量虽然已经被声明，但是在赋值之前无法访问它们的值。

综上所述，变量提升是JavaScript引擎在编译阶段进行的一种行为，它使得变量和函数的声明被提升到作用域的顶部，但赋值操作仍然留在原来的位置。