美文网首页
JavaScript块级作用域, let, const介绍

JavaScript块级作用域, let, const介绍

作者: 刘翾 | 来源:发表于2017-11-08 21:17 被阅读18次

    let

    块级作用域

    ES6里增加了let,const, 声明在{}, -> “function,if ,for等” 的变量作用域被限制在块级。(严格模式下 function 变量属于块级作用域)

    例:

    {
        let i = 0;
    }
    console.log(i);
    //报错Uncaught ReferenceError: i is not defined
    

    同时还可以解决闭包问题, 例如我们为10个div绑定点击事件, 肯定会去写一个立即执行函数去解决闭包问题

        var oDiv = document.getElementsByTagName('div');
        for(var i = 0; i < 10; i++){
            (function(j){
                oDiv[j].onlick = function(){
                    alert(j);
                }
            })(i)
        }
    
    

    但在es6中就可以使用let解决这一问题

        var oDiv = document.getElementsByTagName('div');
        for(let i = 0; i < 10; i++){
                oDiv[i].onlick = function(){
                    alert(i);
                }
        }
    
    

    块级作用域特点

    一旦let在作用域中声明变量 就将统治这个作用域

    var a = 1;
    {
        console.log(a);
        let a = 2;
    }
    //会报错, a is not defined, 这时作用域里a使用了let定义, 导致作用域内形成死去, 不会去找全局变量的a.
    

    因此使用let无法重复定义变量.

    let a = 2;
    let a = 1;
    console.log(a);
    //报错, Identifier 'a' has already been declared
    

    ES6 let 不存在变量声明提升

    在es6之前, 如果像这样定义一个a变量不会报错的, 但如果使用let定义, 则会报错

    console.log(a);
    var a = 1;
    //不会报错, 输出undefined;
    
    console.log(b);
    let b = 2;
    //报错, b is not defined
    

    const

    特点一: 一旦声明常量的值就不能更改

    const PI = 3.14;
    PI = 3.14;
    //报错, Assignment to constant variable.
    

    **特点二: ** 声明一个常量必须马上初始化

    const PI;
    PI = 3.14 
    //报错,  Missing initializer in const declaration
    

    特点三: let 和 const 一样不能重复声明

    const message = 'hello';
    let age = 20;
    const message = 'world';
    let age = 10;
    //报错
    

    **额外补充 : ** const指向变量的地址, 只要变量名所引用的地址不变就不会报错, 例如:

    const a = {name: [1,2,3]};
    a.name[0] = 4;
    //不会报错
    
    const foo = {};
    foo.prop = 123;
    console.log(foo.prop);
    //不会报错
    
    foo = {};
    //报错
    

    相关文章

      网友评论

          本文标题:JavaScript块级作用域, let, const介绍

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