一、块级作用域绑定

var声明及变量提升机制

function getValue(condition){
    if(condition){
        var value = "blue";
        return value;
    } else {
        console.log(value);
    }
    console.log(value);
}
getValue(0)
//undefined
//undefined

在预编译阶段js引擎会将上面函数修改成下面这样

function getValue(condition){
    var value
    if(condition){
        value = "blue";
        return value;
    } else {
        console.log(value);
    }
    console.log(value);
}

块级声明

function getValue(condition){
    if(condition){
        let value = "blue";
    } else {
        //变量value在此处不存在
        return null
    }
    //变量value在此处不存在
}

var count = 30;
let count = 30;
//Uncaught SyntaxError: Identifier 'count' has already been declared

var count = 30;
if(condition){
    let count = 10;
    //不会抛出错误
}

const maxItems = 30;
const name;
//Uncaught SyntaxError: Missing initializer in const declaration

const maxItems = 5;
maxItems = 6;
//Uncaught TypeError: Assignment to constant variable.

const person = {name: 'binperson'}
//可修改对象属性的值
person.name = 'bin'
//抛出语法错误
person = {
    name: 'bin'
}
//Uncaught TypeError: Assignment to constant variable.

临时死区(TDZ)

if(condition){
    console.log(typeof value);//引用错误！
    let value = "blue";
}
//Uncaught ReferenceError: value is not defined

console.log(typeof value) //"undefined"

if(condition){
    let value = "blue";
}

//循环中的块作用域绑定

for(var i = 0; i < 10; i++){

}
console.log(i)//10

for(let j = 0; j < 10; j++){

}
//i在这里不可访问，抛出一个错误
console.log(j);
//Uncaught ReferenceError: j is not defined

var funcs = [];
for (var i=0; i < 10; i++){
    funcs.push(function(){
        console.log(i);
    });
}
funcs.forEach(function(func){
    func();//输出10次数字10
});

var funcs = [];
for(var i = 0; i < 10; i++){
    funcs.push(function(value){
        return function(){
            console.log(value);
        }
    }(i));
}

funcs.forEach(function(func){
    func();//输出0，然后1、2，直到9
});

var funcs = []

for(let i = 0; i < 10; i++){
    funcs.push(function(){
        console.log(i);
    })
}
funcs.forEach(function(func){
    func();//输出0，然后1、2，直到9
});

var funcs = [],
    object = {
        a: true,
        b: true,
        c: true
    };
for(let key in object){
    funcs.push(function(){
        console.log(key);
    })
}
funcs.forEach(function(func){
    func();//输出a、b、c
})
//如果使用var声明key，则都会输出c

var funcs = []

for(const i = 0; i < 10; i++){
    funcs.push(function(){
        console.log(i);
    })
}
funcs.forEach(function(func){
    func();
});
//Uncaught TypeError: Assignment to constant variable.

var funcs = [],
object = {
    a: true,
    b: true,
    c: true
};
for(const key in object){//每次迭代不会修改已有绑定，而是会创建一个新绑定
    funcs.push(function(){
        console.log(key);
    })
}
funcs.forEach(function(func){
    func();//输出a、b、c
})

//浏览器中
var RegExp = "Hello!";
console.log(window.RegExp); //"Hello!"

var ncz = "Hi!";
console.log(window.ncz);//"Hi!"

//let或const不能覆盖全局变量，而只能屏蔽它
let RegExp = "Hello!";
console.log(RegExp);//"Hello!"
console.log(window.RegExp); //ƒ RegExp() { [native code] }
console.log(window.RegExp === RegExp)//false

const ncz = "Hi!";
console.log(ncz);//"Hi"
console.log(window.ncz);//"Hi!"
console.log(window.ncz === ncz); //true
console.log("ncz" in window)//false

• 如果希望在全局对象下定义变量，仍然可以使用var。这种情况常见于在浏览器中跨frame或跨window访问代码

块级绑定最佳实践的进化

• 默认使用const，只有确实需要改变变量的时使用let