zoukankan      html  css  js  c++  java
  • ES6的let和const命令

    刚开始学习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都是存在的,都可以从它拿到顶层对象。

  • 相关阅读:
    fetch
    创建Vue实例传入的option
    Text and Binary modes
    daemon_int
    http 协议 c++代码 获取网页
    asp.net mvc 5 初体验
    win32 音视频相关 api
    setuid和seteuid
    用0x077CB531计算末尾0的个数
    webservice gsoap 小记
  • 原文地址:https://www.cnblogs.com/sminocence/p/6669244.html
Copyright © 2011-2022 走看看