深入理解ES6之块级绑定
var 声明与变量提升
在下面的示例中,无论condition是否为true,value都会被创建:
function getValue(condition){
if(condition){
var value = "blue";
return value;
}else{
return null;
//value 在此处可访问,值为undefined
}
//value 在此处可访问,值为undefined
}
块级声明
- 块级声明就是让所声明的变量在指定块的作用域外无法被访问;
- 块级作用域(词法作用域)在如下情况被创建:
- 在一个函数内部;
- 在一个代码块(由一对花括号包裹)内部。
- 目的是为了给JS添加灵活性以及与其他语言的一致性。
let声明
let声明的语法与var的语法一直。基本可以用let代替var进行变量声明,但是会将变量的作用域限制在当前代码块中。如果let声明的变量在整个代码块内部可用,需要手动将let声明防止到顶部。
在如下示例中,value在if代码块外部是无法访问的,并且在condition的值为false时,该变量永远不会被声明并初始化。
function getValue(condition){
if(condition){
let value ="blue";
return value;
}else{
// value 在此处不可用
return null;
}
//value 在此处不可用
}
禁止重复声明
如果一个标识符已经在代码块内部被定义,那么在此代码块内使用同一个标识符进行let声明就会导致跑出错误。例如:
var count = 30;
//语法错误
let count = 40;
在本例中,count被声明了两次:一次使用var,另一次使用let。因为let不能在同一作用域内重复声明一个已有标识符,此处的let声明就会抛出错误。在嵌套的作用域内使用let声明一个同名的新变量,则不会抛出错误,如下,原因是因为它在if语句内部创建了一个新的count变量,二不是在同一级别再次创建此变量。在if代码块内部,这个新变量会屏蔽全局的count变量,从而在局部组织对于后者的访问。
var count = 30;
//不会抛出错误
if(condition){
let count = 40;
//其他代码
}
常量声明
使用const声明的变量会被认为是常量(constant),它们的值在被设置完成后就不能再被改变,所以,所有的const变量都需要在声明时进行初始化,示例如下:
//有效的常量
const maxItens = 30;
//语法错误:未进行初始化
const name;
对比常量声明与 let 声明
- 两者都是块级声明。这意味着在声明它们的语句块外部是无法访问的,并且声明也不会被声明,示例如下:
if(condition){ const maxItems = 5; //其他代码 } //maxItems 在此处无法访问
- const声明会在统一作用域(全局或是函数作用域)内定义一个已有变量是会抛出错误,无论该变量此前是用var还是let声明的。示例如下:
var message = "Hello"; let age = 25; //二者均会抛出错误 const message = "Goodbye"; const age = 30;
- 重大区别:试图对之前用const声明的变量进行赋值会抛出错误,无论实在严格模式还是非严格模式下。如果声明的变量是一个对象,它所包含的值是可以被修改的。
使用const声明对象
const 声明会阻止对于变量绑定与变量自身值的修改,这意味着const声明并不会组织对变量成员的修改。示例如下,记住:const阻止的是对于变量绑定的修改,而不阻止对成员值的修改。
const person = {
name:"Nicholas"
}
//正常工作
person.name = "Greg";
//抛出错误
person = {
name:"Greg"
};
暂时性死区 TDZ( temporal dead zone )
使用 let 或 const 声明的变量,在达到声明处志强是无法访问的,试图访问会导致一个引用错误,即使在通常是安全的操作时(例如使用 typeof 运算符),也是如此。示例如下:
if (condition){
console.log(typeof value); // 引用错误
let value = "blue";
}
循环中的块级绑定
开发者最需要使用变量的块级作用域的场景,或许就是在for循环内,也就是想让一次性的循环计数器仅能在循环内部使用,示例如下,j仅在for循环内部可用,一旦循环结束,该变量在任意位置都不可访问。
for(var i = 0;i < 10;i++) {
process(items[i]);
}
// i 在此处仍然可悲访问
console.log(i); //10
for(let j = 0;j < 10;j++) {
process(items[j]);
}
//i 在此处不可访问,抛出错误
console.log(i);
循环内的函数
var 的特点使得循环变量在循环作用域之外仍然可被访问,于是在循环内创建函数就变得很有问题。如下示例,
var funcs = [];
for(var i = 0; i < 10; i++) {
funcs.push(function(){console.log(i);});
}
funcs.forEach(function(func){
func() //输出数值“10”十次
});
为什么会输出十次“10”?这是因为变量 i 在循环的每次迭代中都被共享了,意味着循环内创建的那些函数都用有对于同一变量的引用。在循环结束后,变量 i 的值会是10,因此当 console.log(i) 被调用时,每次都打印出10。为了修正这个问题,开发者在循环内使用立即调用函数表达式( IIFES ),以便在每次迭代中强制创建变量的一个新的副本,示例如下:
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到9依次输出
})
循环内的 let 声明
重点:let 声明在循环内部的行为是在规范中特别定义的,而与不提升变量声明的特征没有必然联系。事实上,在早期 let 的实现中并没有这种行为,它是后来才添加的。
循环内的常量声明
- 在for循环中,如果使用 const 声明变量,在第二次循环时会抛出错误,示例如下:
var funcs = []; //在一次迭代后抛出错误 for(const i = 0; i < 10; i++){ funcs.push(function(){ console.log(i); }) }
- const 变量在 for-in 或 for-of 循环中使用时,与 let 变量效果相同,示例如下:
var funcs = []; object = { a:true, b:true, c:true }; //不会导致错误 for(const key in object){ funcs.push(function(){ console.log(key); }); } funcs.forEach(function(func){ func(); //依次输出 “a”、“b”、“c” })
全局块级绑定
- 使用 var 全局声明变量时,它会创建一个新的全局变量,并成为全局对象(在浏览器中是 window )的一个属性,这意味着使用 var 可能会无意覆盖一个已有的全局属性。
- 使用 let 或 const 全局声明变量,虽然在全局作用域上会创建新的绑定,但是不会有任何属性被添加到全局对象上,这意味着你不能使用 let 或 const 来覆盖一个全局变量,你只能将其屏蔽。当你不想在全局对象上创建属性时,这种特性会让 let 与 const 在全局作用域中更安全。
块级绑定新的最佳实践
在 ES6 的发展阶段,被广泛认可的变量声明方式是:默认情况下应当使用 let 而不是 var。对需要收到保护的变量使用 const。
一种更流行的替代方案是:在默认情况下使用 const 、并且只在知道变量值需要被更改的情况下才使用 let 。
总结
let 与 const 块级绑定将词法作用域引入了 JS 。这两种声明方式都不会进行提升,并且 只会在声明它们的代码块内部存在。由于变量能够在必要位置被准确声明,其表现更加接近 其他语言,并且能减少无心错误的产生。作为一个副作用,你不能在变量声明位置之前访问 它们,即便使用的是 typeof 这样的安全运算符。由于块级绑定存在暂时性死区( TDZ ), 试图在声明位置之前访问它就会导致错误。
let 与 const 的表现在很多情况下都相似于 var ,然而在循环中就不是这样。在 for-in 与 for-of 循环中, let 与 const 都能在每一次迭代时创建一个新的绑定,这意味着在循 环体内创建的函数可以使用当前迭代所绑定的循环变量值(而不是像使用 var 那样,统一使 用循环结束时的变量值)。这一点在 for 循环中使用 let 声明时也成立,不过在 for 循 环中使用 const 声明则会导致错误。
块级绑定当前的最佳实践就是:在默认情况下使用 const ,而只在你知道变量值需要被更改 的情况下才使用 let 。这在代码中能确保基本层次的不可变性,有助于防止某些类型的错 误。