首页 > 技术文章 > ES6的let和const命令

sminocence 2017-04-06 20:41 原文

刚开始学习es6,心里有点方,因为看了前言,感觉要用什么bebal来翻译成es5的代码,才能在各个平台上兼容运行,还有node各种运行环境。
不过自己也去百度了一些,发现还是有一丢丢的困难。
言归正传吧!开始来了解es6的神奇之处有哪些吧!

一.let命令

let这个命令,是es6新增的,用来声明变量的,和var用法类似,但是要注意的是,用这个声明的变量只有在let命令所在的代码块有效。

代码块

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

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

var和let命令对比而言,var声明的a是全局变量,在全局范围内都有效,而循环内的被赋值给数组a的function在运行时,都会通过闭包读到这同一个变量,导致最后输出的是最后一轮的值,也就是10。
而let命令声明的变量只在块级作用域中有效,所以输出的值是6.
上面代码中,i是let声明的,所以只在本轮循环中有效,所以每一次循环的i都是一个全新的变量,还有javascript引擎内部会记住上一轮循环的值,在初始化本轮i的值时,是在上一轮的值上面计算的。
for循环还有一个特别之处就是:循环语句部分是一个父级作用域,而在循环体内部是一个子作用域。

   for(let i = 0; i < 3 ;i++){
        let i = 'abc';
        console.log(i);
   }
    //abc
    //abc
    //abc

1.不存在变量提升

var命令总是会发生“变量提升”的现象,即变量可以在声明之前使用,值为undefined,但是let命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

2.暂时性死区

只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再接受外部的影响。

    var tmp = 123;
    if(true){
        tmp = 'abc';
        let tmp;
    }

上面的代码,存在全局变量tmp,但在块级作用域中又声明了局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

ES6明确规定,如果区块中存在let和const命令,这个区块会对这些命令声明的变量,从一开始就形成了封闭作用域,凡事在声明之前就使用这些变量,会报错的。
还有在没有let之前,typeof运算符是百分之百安全,永远不会报错。

注意,隐蔽的死区

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

上面的代码报错,是因为y并没有声明,然后就被赋值给x。

let x = x;这一句在var里面就不会出错,但是用let声明就会报错,因为在使用let声明变量时,只要变量还没有声明完成前就使用,就会报错。

3.不允许重复说明

let不允许在相同作用域内,重复声明同一个变量。

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

function func(arg){
    {
        let arg;//不报错
    }
}

二、块级作用域

ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。
第一种场景:内层变量可能会覆盖外层变量
在ES6之前,js没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域,变量提升即将变量提升到它所在作用域的最开始的地方。
a.变量声明
javascript会自动将变量声明“提升”到代码块的头部

    if(!o){
        var o = {};
    }
    //等同于
    var o;
    if(!o){
        o = {};
    }
    //还有尽量将
    for(var i ...){...}
    //写成
    var i;
    for(i...){...}

规则:所有变量声明都放在函数的头部,所有函数都在使用之前定义
b.用来计数的循环变量泄露为全局变量

    var s = "hello";
    for(var i=0;i<s.length;i++){
        console.log(s[i]);
    }
    console.log(i);//5
    变量i只用来控制循环,但是循环结束之后,它并没有消失,泄露成了全局变量

c.ES6的块级作用域的一些规则
(1)es6允许块级作用域的任意嵌套
{{{{{let insane = 'hello world'}}}}};
上面代码使用了一个五层的块级作用域,外层作用域无法读取内层作用域的变量,但是内层作用域可以定义外层作用域的同名变量。
(2)块级作用域的出现,实际上使得获得了广泛应用的立即执行函数表达式(IIFE)不再需要了。

    //IIFE写法
    (
        function(){
            var tmp = ...;
        }()
    );
    // 块级作用域的写法
    {
        let tmp = ...;
    }

d.块级作用域与函数声明
(1)ES5规定:函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域中声明(但是浏览器没有遵守规定,为了兼容之前的旧代码)
(2)ES6:引入块级作用域,明确允许在块级作用域之中声明函数
(3)块级作用域中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
注意:浏览器的实现可以不遵守上面的规定,有自己的行为方式
-允许在块级作用域内声明函数
-函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
-同时,函数声明还会提升到所在的块级作用域的头部
上面三条规则只对ES6的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当做let处理。

在浏览器的ES6环境中,块级作用域声明的函数行为类似于var声明的变量,考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数,如果确实需要,也应该写成函数表达式,而不是函数声明语句
ES6的块级作用域允许声明函数的规则,只在使用大括号{}的情况下成立,如果没有使用大括号,就会报错。
e.do表达式
本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值。
使用do:在块级作用域之前加上do,使它成为do表达式

    {
        let t = f();
        t = t * t + 1;
    }
    //加上do,使它成为do表达式
    {
        let x = do{
            let t = f();
            t*t+1;
        }
    }

f.块级作用域外部无法调用块级作用域内部定义的函数,如果确实需要调用,则像下面这样处理:

let f;
{
    let a = 'secret';
    f = function(){
        return a;
    }
}
f();//"secret"

需要注意的是,如果在严格模式下,函数只能在顶层作用域和函数内声明,其他情况(比如if代码块、循环代码块)下声明都会报错。

2.const命令

(1)const声明一个只读变量,一旦声明,常量的值就不能改变
(2)const一旦声明变量,就必须立即初始化,不能留到最后赋值。
(3)const的作用域与let命令相同:只在声明所在的块级作用域内有效
(4)const命令声明的变量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用
(5)const声明的变量,与let一样不可重复声明

const本质上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动,对于对象和数组,变量保存的是一个内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就不能控制了。

    const foo ={};
    foo.prop = 123;
    foo={};//这里会报错
    //foo存储的是一个地址,这个地址指向一个对象,不可变的是这个地址,即不能把foo指向另一个地址,但对象本身还是可变的,所以依然可以为其添加属性

3.ES6声明变量方法(6种)

ES5只有两种:var ,function
ES6:var ,function ,let,const,import,class

4.顶层对象的属性

顶层对象,在浏览器环境指的是window对象,在node指的是global对象,ES5之中,顶层对象的属性和全局变量是等价的。
上述问题的现象:
(1)没法在编译时报出变量未声明的错误,只有在运行时才能知道
(2)不知不觉在创建全局变量
(3)顶层对象的属性到处可以读写,这非常不利于模块化编程
(4)window对象有实体含义,指的是浏览器的窗口对象,顶层对象是一个有实体含义的对象,也是不合适的。
ES6:var,function声明的是全局变量,依旧是顶层对象的属性
但是let,const,class声明的全局变量,不再是顶层对象的属性。

    var a = 1;
    window.a;//1
    let b = 1;
    window.b;//undefined

5.global对象

(1)ES5的顶层对象,本身也是一个问题,因为它在各种实现不统一
(2)现在有一个提案,在语言标准的层面,引入global作为顶层对象,也就是说,在所有环境下,global都是存在的,都可以从它拿到顶层对象。

推荐阅读