块级作用域绑定

1.变量声明

JS的变量声明与其他的一些计算机语言不同,在类C的语言中,变量总是在被声明的地方创建;而在JS中变量创建的位置取决于你如何声明它,ES6为我们提供了新的声明方式用来让开发者能够更好的控制变量的作用域;

我们通过var声明的变量,无论其声明位置在哪里,都会编译器视为声明在所在函数的顶部,如果不在任何函数内,则默认为全局作用域的顶部,这就是我们常说的变量的提升。

但这种独特方式有的时候会引发一些bug问题,因为当变量提升的时候虽然已经声明但是并未赋值,所以值是undefined,如果新手不熟悉JS的这种行为,就会引发一些问题,为了避免这种情况,ES6为我们提供了一种新的声明方式叫做let;

1.1 let声明

所谓块级声明就是除去指定的块的作用域外,任何地方都无法访问到你所声明的变量,C语言以及很多类C语言都有这个机制。

那么关键问题是如何创造一个块级哦就是作用域呢?

在ES6中规定有在以下的情况下是可以创建块级作用域的:

  1. 在函数内部;
  2. 在一对代码块之间(也就是由一对花括号所包裹的)内部;

ES6为了我们提供了新的声明方式let,理论上来说,你可以用let来代替var来声明变量,但是let所声明的变量只作用域当前块级作用域内,这点要注意,另外一个重点就是let并不会将你所声明的变量提升到顶部,所以在使用let声明变量时,需要注意将let声明的变量手动写到当前块级作用域的顶部;
例如:

    function letTEST(boo){
        if(boo){
            let value = true;   
        }
        return value;
    }

参考以上代码,当传参的值为true的时候会声明一个变量value;但是由于let声明的变量只会在当前作用域内才能被访问,所以return value的时候会报错,以上代码应当更改为如下

    function letTEST(boo){
        if(boo){
            let value = true;  
            return value; 
        }else{
            return null
        }
    }

考虑另一个场景:

    {
        let a = 10;
        let a = 20;
    }

以上代码在运行时依然会报错,所以我们可以得出一个结论就是在当前块级作用域内,let不能重复声明变量,那么这是为何呢

这里就说let声明变量的机制问题了,当引擎执行当前代码块读取到let的时候会将let所声明的变量提升到一个封闭区间,我们称之为TDZ(暂时性死区),这个区域内,不允许存在相同的变量名 所以重复使用let声明浏览器会报错;

1.2 const声明

在ES5以及之前的标准中,所有的变量都是可以被改变的,所以当我们需要声明一个常量的以后,需要避免声明相同标识符的变量以避免改变常量,但是也可能会不小心改变了这个变量,为了纠正这种不可靠的常量声明方式,ES6引入了const来声明常量;

const声明变量的方式与let几乎相同,唯一一点不同的地方在于const所声明的变量是不可更改的,所以我们称之为常量,看以下代码:

    const a = 10;
    
    a = 20;

以上代码在浏览器中运行的时候,引擎会报错,所以我们可以得知const声明的变量的值是不可更改的,正式由于这个原因,所以在我们利用const声明变量的时候必须要赋值,如果在声明的时候不赋值的话,引擎依然会抛出错误;

通过以上测试我们可以的值const声明变量不可更改,但是当我们使用const声明对象的时候,更改对象的值却不会报错,看以下代码:

    const a = {
        name = "lucy"
    }
    
    a.name = "blank"      //运行正常
    
    a = {
        name = "leo"      //报错
    }

那么我们通过以上代码测试可知,const会阻止变量绑定以及变量本身的值得更改,并不会对其中的变量成员的更改做出合理的反应,这点很重要


前端死宅
3 声望0 粉丝