共计 1376 个字符,预计需要花费 4 分钟才能阅读完成。
ES6 新增了二个声明变量的关键字,let 和 const,再加上 ES6 之前的 var,这样声明变量就有三个关键字了,大有三国鼎立之势。那到底用哪个来声明变量呢?
var
首先,得说说 var 的特殊行为,变量提升,来看一个例子:
var condition = false
if (condition) {
var value = ‘red’
console.log(value)
} else {
// value 在这里可以访问,值为 undefined
console.log(value)
}
在上面代码中,即使 condition 为 false,变量 value 也是存在的,相当于如下定义:
var condition = false
var value
if (condition) {
value = ‘red’
console.log(value)
} else {
// value 在这里可以访问,值为 undefined
console.log(value)
}
就是说,使用 var 关键字声明的变量,无论其实际声明位置在何处,都会被视为声明于所在函数的顶部(如果声明不在函数内,则视为在全局作用域的顶部),这就是变量提升。
对这种特殊行为,如果你不理解,就很可能导致 bug。我们来看一个循环的例子:
for (var i = 0; i < 6; i++) {
console.log(i)
}
// i 在这里依旧可以访问
console.log(i) // 6
for 循环完了,已经不再需要变量 i,但是它依旧可以被访问。
所以,ES6 引入了块级作用域,让变量的生命周期更加可控,于是,let 出现了。
块级声明 -let
我们来看看用 let 声明的代码:
var condition = false
if (condition) {
let value = ‘red’
console.log(value)
} else {
// value 在这里不可以访问,会报错
console.log(value)
}
由于变量 value 声明使用的是 let,所以就没有被提升到函数定义的顶部,变量 value 在 if 代码块外部是无法访问的。当 condition 的值为 false 时,该变量不会被声明并初始化。如果上面的那个 for 循环中用 let 声明变量 i,那么循环完了,变量 i 也就随时销毁,不能再被访问。
常量声明 -const
使用 const 声明的变量会被认为是常量(constant),意味着它们的值在被设置完成后就不能再被改变,常量声明与 let 声明一样,都是块级声明。来看个小例子:
const num = 12
num = 13 // 报错
const obj = {name: ‘moddx’, age: 28};
obj.age = 26 // 正常
上面用 const 声明了一个变量 num,当重新给其赋值时会报错,而变量 obj 初始化之后,再将其 age 属性改变,不会报错,因为对象是一个引用类型,其指向的内存中的地址是没有被改变的,除非将其重新赋值给一个新对象,就会报错,如下:
const obj = {name: ‘moddx’, age: 28};
obj = {name: ‘foo’} // 报错
总结
说了这么多,那到底时候用什么关键字来声明呢?就没有一个标准或者约定俗成的习惯吗?目前,被广泛认可的变量声明方式是:默认情况下应当使用 const,当你确定声明的变量需要改变时,用 let 声明。其依据是大部分变量在初始化之后都不应当被修改,因为预期外的改动是 bug 的源头之一。(那 var 呢?好吧,基本被抛弃了)