美文网首页
2019-01-25(var、let 及 const 区别)

2019-01-25(var、let 及 const 区别)

作者: _daraDu | 来源:发表于2019-01-28 11:03 被阅读0次

    要搞明白var,let,const之间的区别,要先弄明白什么是:提升,代码块

    一、提升(预解析)

    虽然变量还没有被声明,但是我们却可以使用这个未被声明的变量,这种情况就叫做提升,并且提升的是声明

    1、变量提升

    在ES6之前,js是没有块级作用域的(一对花括号{} 即为一个块级作用域),只有全局作用域和函数局部作用域。变量提升就是将变量声明提升到他所在作用域最开始的地方。

    console.log(a);  //undefined
    var a = '1111';
    console.log(a);//1111
    
    function fn(){
      console.log(b);//undefined
      var b = '2222';
      console.log(b);//2222
    }
    

    之所以出现上述结果,是因为js的变量提升。实际执行过程

    var a;
    console.log(a);  //undefined
    a = '1111';
    console.log(a);//1111
    
    function fn(){
      var b;
      console.log(b);//undefined
      b = '2222';
      console.log(b);//2222
    }
    

    2、函数提升

    js中函数创建方式分为:函数声明式,函数表达式(又叫函数字面量)。

    只有函数声明式才存在函数提升
    console.log(fn1)  // function fn1()
    console.log(fn2)  // undefined
    function fn1(){
      var a = '11111111';
    }
    var fn2 = function(){
      var b = '22222222'
    }
    

    之所以出现上述结果,是因为js的变量提升。实际执行过程

    function fn1(){   //函数提升,整个代码提升到作用域最开始的地方
      var a = '11111111';
    }
    console.log(fn1)  // function fn1()
    console.log(fn2)  // undefined
    var fn2 = function(){
      var b = '22222222'
    }
    

    暂时性死区

    ES6明确规定,如果区块中存在let和const命令,这个区块对这些声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

    var

    • 全局变量
    • 变量提升
    • 可重复声明

    let

    • 声明的变量只在他所在的代码块中才有效
    • 变量不会提升(所以所有变量必须先声明之后才可以使用,否则会报错)
    • 不可重复声明
    • 暂时性死区
    • 在全局声明但不是全局对象的属性(var声明的变量会挂载在window上,而let和const声明的变量不会)
    for (let i = 0; i < 10; i++) { console.log(i); } console.log(i); // 报错 i is not defined
    for (var j = 0; j < 10; j++) { console.log(j); } console.log(j); //10
    

    const

    • 前5点和let一样
    • const声明一个常量,一旦声明常量的值就不能改变,const 一旦声明了变量,就必须初始化,不能留到以后赋值。如果使用const声明一个变量,但是不赋值,也会报错;
    • 对于对象和数组来说,他们指向的地址是一样的,是里面的值可以改变的

    相关文章

      网友评论

          本文标题:2019-01-25(var、let 及 const 区别)

          本文链接:https://www.haomeiwen.com/subject/cjrvjqtx.html