深入理解ES6之块级绑定

在下面的示例中,无论condition是否为true,value都会被创建:

function getValue(condition){
    if(condition){
        var value = "blue";
        return value;
    }else{
        return null;
        //value 在此处可访问,值为undefined
    }
    //value 在此处可访问,值为undefined
}
复制代码

块级声明

  1. 块级声明就是让所声明的变量在指定块的作用域外无法被访问;
  2. 块级作用域(词法作用域)在如下情况被创建:
    1. 在一个函数内部;
    2. 在一个代码块(由一对花括号包裹)内部。
  3. 目的是为了给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声明

  1. 两者都是块级声明。这意味着在声明它们的语句块外部是无法访问的,并且声明也不会被声明,示例如下:
    if(condition){
        const maxItems = 5;
        //其他代码
    }
    //maxItems 在此处无法访问
    复制代码
  2. const声明会在统一作用域(全局或是函数作用域)内定义一个已有变量是会抛出错误,无论该变量此前是用var还是let声明的。示例如下:
    var message = "Hello";
    let age = 25;
    
    //二者均会抛出错误
    const message = "Goodbye";
    const age = 30;
    复制代码
  3. 重大区别:试图对之前用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 的实现中并没有这种行为,它是后来才添加的。

循环内的常量声明

  1. 在for循环中,如果使用 const 声明变量,在第二次循环时会抛出错误,示例如下:
    var funcs = [];
    //在一次迭代后抛出错误
    for(const i = 0; i < 10; i++){
        funcs.push(function(){
            console.log(i);
        })
    }
    复制代码
  2. 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”
    })
    复制代码

全局块级绑定

  1. 使用 var 全局声明变量时,它会创建一个新的全局变量,并 成为 全局对象(在浏览器中是 window )的一个属性,这意味着使用 var 可能会无意覆盖一个已有的全局属性。
  2. 使用 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 。这在代码中能确保基本层次的不可变性,有助于防止某些类型的错 误。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章