在 JavaScript 中,var
、let
和 const
是用于声明变量的关键字,但它们的作用域、提升行为以及可变性等方面有显著区别。以下是它们的详细对比:
1. var
-
作用域:
-
var
声明的变量是函数作用域(function-scoped),即在函数内部声明的变量只能在函数内部访问。 -
如果在函数外部声明,则为全局作用域。
-
-
提升(Hoisting):
-
var
声明的变量会被提升到其作用域的顶部,但赋值不会被提升。 -
在声明之前访问变量会得到
undefined
。
-
-
重复声明:
-
允许重复声明同一个变量,不会报错。
-
-
示例:
javascript">function example() { console.log(x); // undefined (变量提升) var x = 10; console.log(x); // 10 } example();
2. let
-
作用域:
-
let
声明的变量是块级作用域(block-scoped),即只在{}
代码块内有效。 -
适用于循环、条件语句等块级作用域场景。
-
-
提升(Hoisting):
-
let
声明的变量也会被提升,但不会初始化,访问时会抛出ReferenceError
(暂时性死区,TDZ)。
-
-
重复声明:
-
不允许在同一个作用域内重复声明同一个变量。
-
-
示例:
javascript">if (true) { let y = 20; console.log(y); // 20 } console.log(y); // ReferenceError: y is not defined
3. const
-
作用域:
-
const
声明的变量也是块级作用域(block-scoped)。
-
-
提升(Hoisting):
-
与
let
类似,const
声明的变量也会被提升,但不会初始化,访问时会抛出ReferenceError
。
-
-
可变性:
-
const
声明的变量必须初始化,且不能重新赋值。 -
如果变量是对象或数组,其属性或元素可以修改,但变量本身不能重新赋值。
-
-
重复声明:
-
不允许在同一个作用域内重复声明同一个变量。
-
-
示例:
javascript">const z = 30; z = 40; // TypeError: Assignment to constant variable const obj = { a: 1 }; obj.a = 2; // 合法,修改属性 obj = {}; // TypeError: Assignment to constant variable
4. var
、let
和 const
的区别
(Temporal Dead Zone,暂时性死区)
特性 | var | let | const |
---|---|---|---|
作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
提升 | 变量提升,初始化为 undefined | 变量提升,但不初始化(TDZ) | 变量提升,但不初始化(TDZ) |
重复声明 | 允许 | 不允许 | 不允许 |
可变性 | 可以重新赋值 | 可以重新赋值 | 不可重新赋值(对象属性可修改) |
适用场景 | 旧代码兼容 | 需要块级作用域的变量 | 需要不可变的常量 |
5. 使用建议
-
避免使用
var
:-
var
的作用域和提升行为容易导致 bug,现代 JavaScript 开发中建议避免使用。
-
-
优先使用
const
:-
如果变量的值不需要改变,优先使用
const
,以确保变量的不可变性。
-
-
必要时使用
let
:-
如果变量的值需要改变,使用
let
。
-
6. 总结
-
var
:-
函数作用域,变量提升,允许重复声明。
-
-
let
:-
块级作用域,变量提升但不初始化,不允许重复声明。
-
-
const
:-
块级作用域,变量提升但不初始化,不允许重复声明,不可重新赋值。
-
根据实际需求选择合适的变量声明方式,可以提高代码的可读性和可维护性。