let 和 const 命令

  • let和const都是用来声明变量的

    • let声明的变量允许改变
    • const声明的变量不允许改变
      • const声明的 值类型不可修改，而声明的 引用类型 其地址不可修改
      • const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动
        1. // 声明的变量不会挂在window上
        2. let a = 456;
        3. const b = 456;
        4. console.log(window.a); // undefined
        5. console.log(window.b); // undefined

        块级作用域

  • ES6新增了块级作用域

    • 任何带有花括号{}的，就是一个块级作用域
      • 像while(){}、if(){}、for(){}、function(){}等等
    • 在块级作用域中，变量由let和const声明的话，该变量在块级作用域外，访问不到
  • 函数声明位置的问题
    • ES5 规定，函数只能在顶层作用域和函数作用域之中声明，不能在块级作用域声明
      • 但是，浏览器没有遵守这个规定，为了兼容以前的旧代码，还是支持在块级作用域之中声明函数
    • ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。
      • ES6 规定，块级作用域之中，函数声明语句的行为类似于let
        1. // 案例一
        2. {
        3. let a = 5;
        4. console.log(a); // 5
        5. }
        6. console.log(a); // 报错。相当于未声明变量，就使用变量
        ```javascript // 案例二 // ES5时，经常使用匿名立即执行函数(IIFE)，避免变量声明重复，而导致相互覆盖影响 // 块级作用域的出现，使得IIFE不再必要

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

  1. ```javascript
  2. // 案例三
  3. // ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。
  4. // 第一种写法，报错
  5. if (true) let x = 1;
  7. // 第二种写法，不报错
  8. if (true) {
  9.   let x = 1;
  10. }
  1. // 案例四
  2. function f() { console.log('I am outside!'); }
  3. (function () {
  4.   if (false) {
  5.     // 重复声明一次函数f
  6.     function f() { console.log('I am inside!'); }
  7.   }
  9.   f();
  10. }());
  12. // 浏览器是 ES5 的环境下，相当于
  13. function f() { console.log('I am outside!'); }
  14. (function () {
  15.   // 变量提升
  16.   function f() { console.log('I am inside!'); }
  17.   if (false) {
  18.   }
  19.   f(); // 打印出I am inside!
  20. }());
  22. // 浏览器是 ES6 的环境下,相当于
  23. function f() { console.log('I am outside!'); }
  24. (function () {
  25.   var f = undefined;
  26.   if (false) {
  27.     function f() { console.log('I am inside!'); }
  28.   }
  30.   f();
  31. }());
  32. // Uncaught TypeError: f is not a function

let 的特点

  1. 使用let命令声明的变量，不存在变量提升

即要求变量一定要在声明后使用，否则报错

  1. // var 的情况
  2. console.log(foo); // 输出undefined
  3. var foo = 2;
  5. // let 的情况
  6. console.log(bar); // 报错ReferenceError
  7. let bar = 2;

  1. 使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）

    1. if (true) {
    2. // TDZ开始
    3. tmp = 'abc'; // ReferenceError
    4. console.log(tmp); // ReferenceError
    6. let tmp; // TDZ结束
    7. console.log(tmp); // undefined
    9. tmp = 123;
    10. console.log(tmp); // 123
    11. }

  2. 不允许重复声明

    1. // 报错
    2. {
    3. let a = 1;
    4. let a = 2;
    5. }
    6. // 报错
    7. {
    8. var a = 1;
    9. let a = 2;
    10. }

    const 的特点

  • let的三个特点，const也有
  • 另外，const在声明时必须赋值，否则报错