深入理解ES6--块级作用域(let const)

来源:互联网 发布:英文版手机淘宝 编辑:程序博客网 时间:2024/05/20 07:35

var 声明及变量提升机制

var 的声明提升机制 —> 在函数作用域或全局作用域中通过关键字var 声明的变量,无论实际在哪里声明,都会被当成在当前作用域(ES5作用域,只有函数能起到块级作用域的目的)顶部声明的变量.
var 声明的变量会覆盖window的原有对象

var value;if(true){    //可以重复声明    var value = 1;}//本应该只作用在if 花括号之内console.log(value);//1;var Math = 1; //window.Math === Math  true

ES6 的块级声明

let 声明

1.let 不能重复声明
2.只作用在当前代码块
3.声明的变量不会覆盖window 上面的变量

if(true){    let value = 1;}console.log(value);//undefined;let Math = 1; //window.Math === Math  false/*带来的问题:当你使用iframe去调用对象的时候.由于let 声明的变量不在window上面,无法通过iframe调用,所以这种情况需要使用var来声明变量 */

const 声明

const表示声明的是常量,和let 一样也是块级作用域
1.const 不能重复声明
2.声明同时需要赋值
3.不能重复赋值
4.声明的是对象的话,可以修改对象的内容
5.声明的变量不会覆盖window 上面的变量

const val; // 语法错误,常量未初始化const value = 1;if(true){    //作用域不同可以声明,let 可以置换为const    let value = 1;}value = 2; //语法错误,不能重复赋值 const obj = {};obj.xx = "xx";//可以修改对象的内容obj = 1;//错误,不能修改obj 的绑定

临时死区

用来描述let 和const 声明的变量不提升的效果

if(true){    console.log(typeof value);//错误:value is not defined    let value = 'val';}

循环中的声明

    var funcs = [];    for (var i = 0; i < 10 ; i++) {        funcs.push(function(){            console.log(i);        })    }    funcs.forEach(function(v){        v(); //输出 10次10,让新手很痛苦的问题,需要用闭包解决,在此就不赘述    })    var funcs = [];    for (let i = 0; i < 10 ; i++) {        funcs.push(function(){            console.log(i);        })    }    funcs.forEach(function(v){        v(); //输出0,1,2,3,4,5,6,7,8,9    })    //const 的话会报错,再循环中,for(let i=0;i<10;i++)    //相当于给 i 赋值10次,const 不能重复赋值所以报错    for(const key in obj){        //当const 遍历对象 ,循环迭代,不会报错    }