导语
过去, javascript 的变量声明机制一直令我们感到困惑。 大多数类c语言在声明变量的同时也会创建变量(绑定)。 而在以前的javascrpit 中, 何时创建变量要看怎么声明变量。 es6 的新语法可以帮助你更好地控制作用域. 本文将解释为什么经典的var 容易让人迷惑 。
1 .var 声明&提升机制(Hoisting)
在函数作用域或全局作用域中通过关键字var 声明的变量 , 无论实际上是在哪里声明的 , 都会被当成在当前作用域顶部声明的变量 , 这就是我们常说的提升机制
例如:
```function getValue () {
if(0) {
var value = 'blue';
return value ;
} else {
return null
}
}
`
解释
: 如果你不熟悉javascript , 可能会认为只有当condition的值为true 时才会创建变量value 。 事实上, 无论如何变量 value 都会被创建。 在预编译阶段, js 引擎会将上面的getValue函数修改成下面这样:
`function getValue () {
var value ;
if(0) {
value = 'blue' ;
return value ;
} else {
return null ;
}
}
变量声明被提升至函数作用域顶部, 而初始化操作依旧留在原处执行, 这就意味着在else子句中也可以访问到该变量 , 而且由于此时变量尚未初始化 , 所以其值为undefined.
## 2. 块级声明
块级声明用于声明在指定块的作用域之外无法访问的变量 , 块级作用域存在于 :
函数内部
块中{}
很多类c语言都有块级作用域 , 而es6 引入就上为了让js 更灵活和普适
### let 声明
let 声明的用法与var 相同。 用let 代替var来声明变量, 就可以把变量的作用域限制在当前代码块中 , (稍后我们将在临时死区一节中讨论另外几处细微的语法差异), 由于let 声明不会被提升, 因此开发者将let 声明语句放在封闭代码块的顶部 , 以便整个代码块都可以访问, 例如 :
```
function getValue (condition) {
if(condition) {
let value = 'blue' ;
return value ;
} else {
//变量value 不存在
return null
}
//变量value 在此处不存在
}
现在这个getValue 函数的运行结果更像类c语言. 变量value改由关键字let 进行声明后 , 不再被提升至函数顶部。 执行流离开if 块value立刻被销毁。 如果condition 的值false ,就永远不会声明并初始化value.
禁止重声明
假设作用域中已经存在某个标志符, 此时再使用let 关键字声明它就会报错 , 比如:
var count = 30 ;
//抛出错误
let count = 10 ;
解释:同一作用域中, 不能用let 重复定义已经存在的标志符, 所以此处的let 声明会抛出错误。但如果当前作用域内嵌另一个作用域, 便可在内嵌的作用域中用let 声明同名变量,例如 :
var count = 30 ;
if(1) {
//不会抛出错误
let count = 10 ;
}
由于此处的let是在if块内声明了新变量count, 因此不会抛出错误。 内部块中的count会遮蔽全局作用域中的count , 后者只有在if块外才能访问到
const 声明
es6标准还提供了const关键字。使用const 声明的变量是常量,其值一旦被设定后不可更改。因此,每个通过const声明的常量必须进行初始化,例如
// 有效的常量
const maxItem = 30 ;
//语法错误 , 常量未初始化
const name ;
const与let
相同点
const 与let 声明的都是块级标识符,
所以常量也只在当前代码块内有效,一旦执行到块外会立即被销毁
在同一作用域用const 声明已经存在的标识符也会导致语法错误,无论该标志符是使用var 还是let声明的,比如
var message = 'hello' ;
let age = 25 ;
//这俩条都会抛出错误
const message = 'goodbye' ;
const age = 30
后俩条const 声明语句本身没问题, 但由于前面用var 和let 声明了俩个同名变量,结果代码就无法执行了
尽管相似之处很多, 但有一个很大的不同,即无论是在严格模式下还是非严格模式下,都不可以为const定义的常量再赋值, 否则会抛出错误
const maxItems = 5 ;
//抛出错误
maxItem = 6 ;
然而js与其他语言不同的是, javascript中的变量如果是对象,则对象中的值可以修改
用const 声明对象
const声明不允许修改绑定, 但允许修改值,比如
const person = {
name: 'lihua'
}
//可以修改对象属性的值
person.name = 'hanmeimei'
//抛出错误
person = {
name:'hanmeimei'
}
切记:如果直接给person赋值, 即要改变person的值, 就会抛出错误。const声明不允许修改绑定,但允许修改值
临时死区(Temporal Dead Zone)
与var 不同,let 和 const 声明的变量不会被提升到作用域顶部, 如果在声明之前访问这些变量,
即时是相对安全的typeof操作符也会触发引用错误,例如:
if(1) {
console.log(typeof value) ;//引用错误
let value = 'blue'
}
由于console.log(typeof value)语句会抛出错误, 因此用let定义并初始化变量value的语句不会执行。此时的value还位于js所谓的临时死区(TDZ)中。虽然es标准并没有明确提到TDZ,但人们常用来它来描述let和const的不提升效果。
解释:javaScript引擎在扫描代码发现变量声明中,要么将他们提升至作用域顶部(遇到var 声明),要么将声明放到TDZ中(遇到let 和const声明)。访问TDZ中的变量会触发运行时错误。只有执行过变量声明的语句后,变量才会从TDZ中移出,然后方可正常访问。
在声明前访问由let定义的变量就是这样。由前面实例可见,即便是相对不容易出错的typeof操作符也无法阻挡引擎抛出的错误。但在let声明的作用域外对该变量使用typeof则不会报错,具体如下:
console.log(typeof value) ;//undefined
if(1) {
let value = 'blue'
}
typeof 是在声明value的代码块外执行的,此时value并不在TDZ中。这也就意味着不存在value这个绑定,typeof操作最终返回undefined
循环块级作用域绑定
在下文中,一切实例的运行环境均是浏览器 , 而不是node,所以有可能出现在node上不合适的情况
开发者可能最希望实现for循环的块级作用域了,因为可以把随意声明的计数器变量限制在循环内部。例如:
for (var i = 0 ; i < 10 ; i ++) {
process(item[i]) ;
}
//这里仍然可以访问变量i
console.log(i) ; // 10
在默认拥有块级作用域的其他语言中,这个实例也可以正常运行, 并且变量i只有在for循环中才能访问到。而在javascript中,由于var 声明得到了提升,变量i在循环结束后仍然可访问到。如果换用let声明变量就能得到想要的结果,比如:
for (let i = 0 ; i < 10 ; i ++) {
process(item[i]) ;
}
//i在这里不可访问,抛出一个错误
console.log(i) ;
解释 :在这个实例中, 变量i只存在于for循环中,一旦循环结束,在其他地方均无法访问这个变量
循环中的函数
长久以来, var声明让开发者在循环中创建函数变得异常困难,因为变量到了循环之外仍能访问。请看这段代码:
var funcs = [] ;
for (var i = 0 ; i < 10 ; i ++) {
funcs.push(function (){
console.log(i) ;
}) ;
}
funcs.forEach ( (func) => {
func() ; //输出 10 次 数字 10
})
你预期的结果可能是输出数字 0 - 9 , 但它输出了一连串的10次10 。这是因为循环里的每次迭代同时共享着变量i , 循环内部创建的函数全都保留了对相同变量的引用。循环结束时变量i的值为10, 所以每次调用console.log(i) 时就会输出数字10
解决方法1: 自执行函数
为了解决这个问题,开发者们在循环中使用立即执行函数表达式,以强制生成计数器变量的副本,就像这样:
var funcs = [] ;
for(var i = 0 ; i < 10 ; i ++) {
funcs.push((function(value) {
return function() {
console.log(value)
}
}(i)) ;
}
funcs.forEach(function (func) {
func() ; // 输出0 然后1 ,2 , .... 到 9
}) ;
解释: 在循环内部自执行函数为接受的每一个变量i都创建了一个副本并存储为变量value。这个变量的值就是相应迭代创建的函数所使用的值。因此调用每个函数都会像0到9循环一样得到期望的值。es6中的let和const提供的块级绑定让我们无须这么折腾
解决方法2: let && const
let声明模仿上述实例中自执行函数所做的一切来简化循环过程。每次迭代循环都会创建一个新变量,并以之前迭代中同名变量的值将其初始化。这意味着你彻底删除自执行函数之后仍然可以得到预期的结果,就像这样:
var funcs = [] ;
for(let i = 0 ; i < 10 ; i++) {
funcs.push(function(){
console.log(i) ;
})
}
funcs.forEach( func =>{
func() ; //输出 0 1 2 ... 9
})
这段循环与之前那段结合了var和自执行函数的循环的运行结果相同,但相比之下更为简洁。每次循环的时候let声明都会创建一个新变量i,并将其初始化为i的当前值。所以循环内部创建的每个函数都能得到属于他们自己的i的副本。对于for-in 和 for-of 来说也是一样的。
let声明在循环内部的行为是标准中专门定义的,它不一定与let的不提升特性有关,理解这一点至关重要。事实上,早期的let实现不包含这一行为,它是后来加入的
全局块作用域绑定
let和const与var的另外一个区别是它们在全局作用域中的行为。当var被用于全局作用域时,它会创建一个新的全局变量作为全局对象(浏览器环境中的window对象)的属性。这意味着用var 很可能会无意中覆盖一个已经存在的全局变量,就像这样:
//在浏览器中
var RegExp = "hello!" ;
console.log(window.RegExp) ; // "hello"
var ncz = "Hi!" ;
console.log(window.ncz) ; // "Hi!"
即使全局对象RegExp定义在window上,也不能幸免被var声明覆盖。实例中声明的全局对象RegExp会覆盖之前原来那个。同样,ncz被定义为一个全局变量,并立即成为window的属性。javaScript过去一直这样。
如果你在全局作用域中使用let或const,会在全局作用域下创建一个新的绑定,但该绑定不会添加为全局对象的属性。换句话说,用let或const不能覆盖全局变量,而只能遮蔽它。实例如下:
//在浏览器中
let RegExp = "hello!" ;
console.log(RegExp) ; // "hello"
console.log(RegExp === window.RegExp) // false
const ncz = "Hi!" ;
console.log(ncz) ; // "Hi!"
console.log("ncz" in window) // false
这里let声明的RegExp创建了一个绑定并遮蔽了全局的RegExp变量。结果是window.RegExp和RegExp不相同,但不会破坏全局作用域。同样,const声明的ncz创建了一个绑定但没有创建为全局对象的属性。如果不想为全局对象创建属性,则使用let和const要安全得多。
Note:如果希望在全局对象下定义变量,仍然可以使用var。这种情况常见于在浏览器中跨frame或跨window访问代码。
小结
块级作用域绑定的let和const为javaScript引入了词法作用域,他们声明的变量不会提升,而且只可以在声明这些变量的代码块中使用。如此一来,javascript声明变量的语法与其他语言就更像了。同时也降低了产生错误的可能。与此同时,在声明前访问块级变量会导致错误,因为变量还在临时死区(TDZ)中。
let和const的行为很时候与var一致。然而,他们在循环中的行为很不一样。在for循环中,let和const都会每次迭代创建新绑定,从而使循环体内创建的函数可以访问到相应迭代的值,而非最后一次迭代后的值(像var声明那样)。
关于作者
本文部分借鉴了其他大佬的作品(哈哈),只是为了分享和复习,侵权立删