深刻理解javascript做用域系列第四篇——块做用域

[1]let[2]const[3]try

前面的话

　　尽管函数做用域是最多见的做用域单元，也是现行大多数javascript最广泛的设计方法，但其余类型的做用域单元也是存在的，而且经过使用其余类型的做用域单元甚至能够实现维护起来更加优秀、简洁的代码，好比块做用域。随着ES6的推广，块做用域也将用得愈来愈普遍。本文是深刻理解javascript做用域系列第四篇——块做用域

 

let

for (var i= 0; i<10; i++) {
    console.log(i);
}

　　上面这段是很熟悉的循环代码，一般是由于只想在for循环内部的上下文中使用变量i，但实际上i能够在全局做用域中访问，污染了整个做用域

for (var i= 0; i<10; i++) {
     console.log(i);
}
console.log(i);//10

　　ES6改变了现状，引入了新的let关键字，提供了除var之外的另外一种变量声明方式。let关键字能够将变量绑定到所在的任意做用域中(一般是{...}内部)，实现块做用域

{
  let i = 1;  
};
console.log(i);//ReferenceError: i is not defined

　　块级做用域实际上能够替代当即执行匿名函数（IIFE）

(function(){
  var i = 1;  
})();
console.log(i);//ReferenceError: i is not defined

　　若是将文章最开始那段for循环的代码中变量i用let声明，将会避免做用域污染问题

for (let i= 0; i<10; i++) {
     console.log(i);
}
console.log(i);////ReferenceError: i is not defined

　　for循环头部的let不只将i绑定到了for循环的块中，事实上它将其从新绑定到了循环的每个迭代中，确保使用上一个循环迭代结束时的值从新进行赋值

//与上一段代码等价
{
    let j;
    for (j=0; j<10; j++) {
        let i = j; //每一个迭代从新绑定
        console.log( i );
    }
}

循环

　　下面代码中，因为闭包只能取得包含函数中的任何变量的最后一个值，因此控制台输出5，而不是0

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

　　固然，能够经过函数传参，来保存每次循环的值

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

　　而使用let则更方便，因为let循环有一个从新赋值的过程，至关于保存了每一次循环时的值

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

重复声明

　　let不容许在相同做用域内，重复声明同一个变量

{
  let a = 10;
  var a = 1;//SyntaxError: Unexpected identifier
}

{
  let a = 10;
  let a = 1;//SyntaxError: Unexpected identifier
}

提高

　　使用let进行的声明不会在块做用域中进行提高

{
  console.log(i);//ReferenceError: i is not defined
  let i = 1;  
};

 

const

　　除了let之外，ES6还引入了const，一样能够用来建立块做用域变量，但其值是固定的（常量）。以后任何试图修改值的操做都会引发错误

if (true) {
    var a = 2;
    const b = 3; 
    a = 3; 
    b = 4;// TypeError: Assignment to constant variable
}
console.log( a ); // 3
console.log( b ); // ReferenceError: b is not defined

　　const声明的常量，也与let同样不可重复声明

const message = "Goodbye!";
const message = "Goodbye!";//SyntaxError: Identifier 'message' has already been declared

 

try

　　try-catch语句的一个常见用途是建立块级做用域，其中声明的变量仅仅在catch内部有效

{
    let a = 2;
    console.log(a); // 2
}
console.log(a); //ReferenceError: a is not defined

　　在ES6以前的环境中，可使用try-catch语句达到上面代码的相似效果

try{
    throw 2;
}catch(a){
    console.log( a ); // 2
}
console.log( a ); //ReferenceError: a is not defined

//或者
try{
    throw undefined;
}catch(a){
    a = 2;
    console.log( a ); // 2
}
console.log( a ); //ReferenceError: a is not defined