变量的声明 let/const

210 阅读3分钟

let 命令

ES6新增了 let 命令,用于声明变量,但是所声明的变量只在let所在的代码块中有效。、

1、定义块级作用域

一直说定义块级作用域,到底什么是怎么定义的呢?

就是在一个区块内,如果存在 let或const 命令,则这个区块对这些命令声明的变量从一开始就形成封闭作用域,let/const 所声明的变量就‘绑定’了这个区域,不再受外部影响。
var tmp = '123';
function f(){
    console.log(tmp);           //undefined
    if(false){
        var tmp = 'abc'
    }
    console.log(tmp);           //undefined
}
f();

-----------------------------

var tmp = '123';
function f(){
    console.log(tmp);           //123
    if(false){
        let tmp = 'abc'
    }
    console.log(tmp);           //123
}
f();

-------------------------------

function f(){
    let tmp = '123'if(true){
        let tmp = 'abc'
    }
    console.log(tmp);           //123
}
f();

if 代码块的外部使用了外层的 tmp 变量,内部使用内层的 tmp 变量。但是,函数 f 执行后,输出结果为 undefined,原因在于变量提升导致内层的 tmp 变量覆盖了外层的 tmp 变量。

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

-------------------------------

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

当变量是 let 声明后,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,于是最后输出为6。

for循环还有个特别之处,就是设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。

2、暂时性死区

暂时性死区是个区域,有开始位置也有结束位置。 在代码块内,使用 let/const 声明的变量之前,该变量是不可用的。这在语法上称为 暂时性死区(简称TDZ)

if (true) {

    //TDZ开始 
    tmp = 'abc';            //ReferenceError
    console.log(tmp);       //ReferenceError

    //TDZ结束
    let tmp;                
    console.log(tmp);       //undefined


    tmp = 123;
    console.log(tmp);       //123

}

上面的代码中,在 let 命令声明变量 tmp 之前,都属于 tmp 的“死区”。

typeof x;    //ReferenceError
let x;

----------------------------

function bar(x = y,y = 2){
    return [x,y]
}
bar();  //报错


---------------------------

let x = x;  //ReferenceError

==总之,暂时性死区的本质就是,只要进入当前作用域,所要使用的变量就已经存在,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。==

3、不允许重复声明

在一个作用域内,let 不能声明相同的变量。

//报错
function (){
    let a = 10;
    var a = 1;
}

function fun(arg){
    let arg; //报错
}

4、块级作用域和函数声明

//浏览器的ES6环境

function f(){ console.log('outside'); }
(function(){
    if(false){
        function f(){ console.log('inside'); }
    }
    f();
}())

// Uncaught TypeError: f is not a function
 
-------------------------------------------
//上面代码相当于下面的
//浏览器的ES6环境

function f(){ console.log('outside'); }
(function(){
    var f = undefined;
    if(false){
        function f(){ console.log('inside'); }
    }
    f();
}())

const命令

const 声明一个只读的常量,一旦声明,常量的值就不会改变。const保证的并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。

const foo;   //SyntaxError   对const只声明不赋值会报错

const和let一样,块级作用域、变量不会提升、暂时性死区。