美文网首页Web前端之路让前端飞技术干货
ECMAScript6基础学习教程(二)块级作用域

ECMAScript6基础学习教程(二)块级作用域

作者: 娜姐聊前端 | 来源:发表于2017-04-13 20:54 被阅读105次

    ES6出现之前,只有函数可以形成作用域。而ES6中新增了块级作用域概念。

    letconst命令可以构成一个块级作用域

    1.let

    用法类似var,声明一个块作用域内的变量,注意,块作用域外无法访问该变量。用法如下:

    // 在if语句中定义块作用域
    var check = true;
    if (check) {
      let value = 6;
    }
    console.log(value); //undefined
    // 在循环中定义块作用域
    for(let i =0; i < arr.length; i++) {...}
    

    var不同之处:

    1. 不支持“变量提升”;
    2. 一旦某个变量声明为let或者const类型,则该变量会绑定该区域,不受外界影响。例如:
    var temp = 1;
    if (true) {
        console.log(temp); //ReferenceError: 用let声明的temp变量会绑定该块作用域
        let temp = 2;
    }
    
    1. 在同一个作用域内,不允许重复声明同一个变量。例如:
    if (true) {
        let a = 1;
        let a = 2; //throw error: Duplicate declaration "a"
    }
    

    有了块级作用域,可以避免内层变量覆盖外层变量,可以让变量应用到更小范围内。
    下面让我们看一道经典的闭包问题,思考如何用let解决?例题如下:

    var a = [];
    for (var i =0; i <10; i++){
      a[i] = function(){
        console.log(i);
      }
    }
    a[6](); // 10
    

    由于变量i是全局变量,所有每一次循环,新的i值都会覆盖老的i值,导致最后数组a的每个元素运行结果都是10。
    如果使用leti变量的作用域范围只限于块作用域,即每次循环的代码块,如此一来,最后a[6]()可以返回期望值:6。修改如下:

    var a = [];
    for (let i =0; i <10; i++){
      a[i] = function(){
        console.log(i);
      }
    }
    a[6](); // 10
    

    2.const

    const用来声明常量,一旦定义,就不能修改。

    这里需要注意,如果const声明的是对象,那么,变量名指向的是对象地址。所以,对象地址不允许修改,但是,对象的值,是可以修改的。

    例如:

    const foo = {a: 1};
    foo.b = 3; // 正确
    foo = {b: 6}; // throw error: "foo" is read-only
    

    3.小结

    块级作用域的出现,帮助解决了很多和变量作用域相关的问题!让我们好好享受这个新特性吧!

    下一节:ECMAScript6基础学习教程(三)变量的解构赋值

    微信公众号:

    相关文章

      网友评论

        本文标题:ECMAScript6基础学习教程(二)块级作用域

        本文链接:https://www.haomeiwen.com/subject/gksvattx.html