2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

es6基础0x002:var、let、const、块级作用域、暂存死区

es6javascript作者:猿2048志愿者

0x001 var

  1. 语法

    var varname1 [= value1 [, varname2 [, varname3 ... [, varnameN]]]];
  2. 使用

    var a, b=2 // 声明多个变量,可以赋值,也可以不赋值
    a=1 // 先声明,再赋值
  3. var变量提升
    使用var声明的变量将会被提升到函数的顶部

    console.log(a) // undefined
    var a =2  
    console.log(a) // 2
    console.log(b) //Uncaught ReferenceError: b is not defined...

    以上代码相当于

    var a
    console.log(a) // undefined
    a=2
    console.log(a) // 2
    console.log(b) //Uncaught ReferenceError: b is not defined...

0x002 let

  1. 语法

    let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];
  2. 使用

    let a, b = 2 // 声明多个变量,赋值不赋值无所谓
    a = 2 // 声明之后再赋值
  3. 不再提升

    console.log(a) // Uncaught ReferenceError: a is not defined...
    let a=1 

    注意:猜测, 使用babel翻译一下代码发现,只是let变成了var,所以使用babel转义之后的代码依旧会提升

  4. 不能重复声明

    let a=1
    let a=2 // Uncaught SyntaxError: Identifier 'a' has already been declared

0x003 const

  1. 语言

    const name1 = value1 [, name2 = value2 [, ... [, nameN = valueN]]];
  2. 使用

    const a=1, b=2 // 不能省略的值
  3. 不能省略的值

    const c // Uncaught SyntaxError: Missing initializer in const declaration
  4. 不能重复赋值

    const d=4
    d=5 // Uncaught TypeError: Assignment to constant variable.
  5. 可以修改的引用

    const e=[]
    e[0]=0
    console.log(e) //[0]

0x004 块级作用域

块级作用域是随着letconst而来最有用的特性了,在之前的js中,js的作用域是函数级的,由此带来的几个臭名昭著的问题:

  • 意外被修改的值

    function varTest() {
      var x = 1;
      if (true) {
        var x = 2;  // 同样的变量!
        console.log(x);  // 2
      }
      console.log(x);  // 2
    }

    可以使用let避免了

    function letTest() {
      let x = 1;
      if (true) {
        let x = 2;  // 不同的变量
        console.log(x);  // 2
      }
      console.log(x);  // 1
    }
  • 万恶的for循环和点击事件

    var list = document.getElementById("list");
    
    for (var i = 0; i < 5; i++) {
      var item = document.createElement("LI");
      item.appendChild(document.createTextNode("Item " + i));
    
      item.onclick = function (ev) {
        console.log("Item " +i + " is clicked.");
      };
      list.appendChild(item);
    }
    console.log(i) // 5

    如果点击上面,不管点击哪个,显示出来的都是Item 5 is clicked.,虽然可以使用闭包解决,但是现在有了更好的方案

    let list = document.getElementById("list");
    
    for (let i = 0; i < 5; i++) {
      let item = document.createElement("LI");
      item.appendChild(document.createTextNode("Item " + i));
    
      item.onclick = function (ev) {
        console.log("Item " +i + " is clicked.");
      };
      list.appendChild(item);
    }

0x005 作用域规则很简单

  1. {}块内形成一个作用域,包括ifelsewhileclassdo...while{}function

    {
        const f=6
    }
    console.log(f) // Uncaught ReferenceError: f is not defined
  2. for循环中用let声明一个初始因子,该因子在每个循环内都是一个新的作用域

    for (let i = 0; i < 10; i++) {
      console.log(i);
    }
    console.log(i) // Uncaught ReferenceError: i is not defined
  3. switch只有一个作用域

    switch (x) {
      case 0:
        let foo;
        break;
        
      case 1:
        let foo; 
        break;
    }
    // Uncaught SyntaxError: Identifier 'foo' has already been declared

0x006 暂存死区-Temporal Dead Zone-TDZ

随着letconst的引入,也引入了暂存死区的概念。使用var的时候,作用域内(函数作用域),在还没使用var声明一个变量的时候,访问该变量,将会获得undefined。但是如果使用let,作用域(块级作用域)内,在还没使用let声明一个变量的时候,访问该变量,将会获得ReferenceError,从作用域开始到let语句之间,就是暂存死区。

{
 console.log(a) // Uncaught ReferenceError: a is not defined
 console.log(b) // Uncaught ReferenceError: b is not defined
 console.log(c) // undefined
 // 暂存死区
 let a =1
 const b=2
 var c=3
}

注意:猜测, 使用babel翻译一下代码发现,只是let变成了var,所以使用babel转义之后可能不存在暂存死区

0x007 总结

尽量使用letconst,如果希望改变该变量的值,则使用let,如果希望不再改变该变量的值或者引用,则使用const,让var成为历史。

本文来源于网络:查看 >
« 上一篇:JS系列之new 操作符
» 下一篇:ES6 系列之 Babel 是如何编译 Class 的(下)
评论
点击刷新
评论
相关博文
×添加代码片段