ES6学习笔记（2）——let和const命令

红太狼 2022-11-26 01:52 254阅读 0赞

# let和const命令 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]

## let ##

**声明的变量只在let命令所在的代码块内有效**

{ 
      let a = 10;
      var b = 1;
    }
    
    a // ReferenceError: a is not defined.
    b // 1

### for循环 ###

for (let i = 0; i < 10; i++) { }
    console.log(i);		//i is not defined

**对比**

//var声明时
    var a = [];
    for (var i = 0; i < 10; i++) { 
      a[i] = function () { 
        console.log(i);
      };
    }
    a[6](); // 10
    //解析：i是var声明的全局变量。循环内i被赋给数组a的function在运行时，通过闭包会读到同一个变量i，导致最后输出的是最后一轮的i的值，也就是10

//let声明时
    var a = [];
    for (let i = 0; i < 10; i++) { 
      a[i] = function () { 
        console.log(i);
      };
    }
    a[6](); // 6
    //解析：let声明的i仅在块级作用域内有效。当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量

**循环语句是一个父作用域，循环体内部是一个单独的子作用域。函数内部的变量i和外部的变量i是分离**

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

### 不存在变量提升 ###

`var`声明的变量可以在声明之前使用，预解析会把声明提前，即变量提升。

console.log(bar)	//undefined
    var bar=1
    
    //实际上var变量提升了
    var bar
    console.log(bar)	//undefined
    a=1

**而`let`所声明的变量一定要在声明后使用，否则报错**

console.log(bar); // 报错ReferenceError
    let bar = 2;

### 暂时性死区 ###

一旦某区块存在let命令，这个区块就对该变量形成封闭作用域。凡是在声明之前就使用这些变量，就会报错。这在语法上称为暂时性死区（temporal dead zone，简称 TDZ）

if (true) { 
      // TDZ开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
    
      let tmp; // TDZ结束
      console.log(tmp); // undefined
    
      tmp = 123;
      console.log(tmp); // 123
    }

### 不允许重复声明 ###

//不允许在相同作用域内重复声明同一个变量
    function () { 
      let a = 10;
      var a = 1;
    }	//报错

//不能在函数内部重新声明参数
    function func(arg) { 
      let arg; // 报错 
    }
    
    function func(arg) { 
      { 
        let arg; // 不报错 
      }
    }

### 块级作用域 ###

//ES6 允许块级作用域的任意嵌套
    { { { { { let insane = 'Hello World'}}}}};

//外层作用域无法读取内层作用域的变量
    { { { { 
      { let insane = 'Hello World'}
      console.log(insane); // 报错
    }}}};

//内层作用域可以定义外层作用域的同名变量
    { { { { 
      let insane = 'Hello World';
      { let insane = 'Hello World'}
    }}}};

### 块级作用域与函数声明 ###

*  **在ES5中：**
    
        function f() {  console.log('I am outside!'); }
        (function () { 
          if (false) { 
            function f() {  console.log('I am inside!'); }// 重复声明一次函数f
          }
          f();		//“I am inside!”
        }());
    
    为什么呢？实际上，在if内声明的函数f会被提升到函数头部，如下
    
        function f() {  console.log('I am outside!'); }
        (function () { 
          function f() {  console.log('I am inside!'); }
          if (false) { }
          f();		//“I am inside!”
        }());
 *  **在es6中：**
    
    es6规定：允许在块级作用域之中声明函数，行为类似于let，在块级作用域之外不可引用
    
        function f() {  console.log('I am outside!'); }
        
        (function () { 
          if (false) { 
              function f() {  console.log('I am inside!'); }
          }
        f();
          }());
    
    这理论上会得到“I am outside!”。但是如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6在[附录B][B]里面规定，浏览器的实现可以不遵守上面的规定，有自己的[行为方式][Link 1]。
    
     *  允许在块级作用域内声明函数，类似于var，即会提升到全局作用域、函数作用域或所在块级作用域的头部
    
    规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作`let`处理，根据浏览器的 ES6 环境规则：
    
        function f() {  console.log('I am outside!'); }
        (function () { 
          if (false) { 
            function f() {  console.log('I am inside!'); }
          }
          f();		//f is not a function
        }());
        
        //因为实际上运行的是
        function f() {  console.log('I am outside!'); }
        (function () { 
          var f = undefined;
          if (false) { 
            function f() {  console.log('I am inside!'); }
          }
          f();
        }());
    
    > 考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句
    
        // 函数声明语句---不推荐
        { 
          let a = 'secret';
          function f() { 
            return a;
          }
        }
        
        // 函数表达式---推荐
        { 
          let a = 'secret';
          let f = function () { 
            return a;
          };
        }

### do 表达式 ###

块级作用域是一个语句，**没有返回值**

{ 
      let t = f();
      t = t * t + 1;
    }		//无返回值

通过do把块级作用域变为do表达式，也就是说**可以返回值**

let x = do { 
      let t = f();
      t * t + 1;
    };		//变量x会得到整个块级作用域的返回值

## const 命令 ##

**特性**

*  `const`声明一个只读的常量，一旦声明，常量的值就不能改变，且必须立即初始化，不能留到以后赋值。
 *  `const`命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。也与`let`一样不可重复声明

**本质**

*  `const`实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。
 *  对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
 *  但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，`const`只能保证这个指针是固定的，不能控制数据结构
    
        const foo = { };
        
        // 为 foo 添加一个属性，可以成功
        foo.prop = 123;
        foo.prop // 123
        
        // 将 foo 指向另一个对象，就会报错
        foo = { }; // TypeError: "foo" is read-only
    
    如果真的想将对象冻结，应该使用`Object.freeze`方法
    
        const foo = Object.freeze({ });

## ES6 声明变量的六种方法 ##

*  ES5 只有两种声明变量的方法：`var`命令和`function`命令
 *  E6除了添加`let`和`const`命令；`import`命令和`class`命令

## 顶级对象的属性 ##

顶层对象，在浏览器环境指的是`window`对象，在Node指的是`global`对象。ES5之中，顶层对象的属性与全局变量是等价的

window.a = 1;
    a // 1
    
    a = 2;
    window.a // 2

**但这样会带来很多问题：**

*  首先是没法在编译时就报出变量未声明的错误，只有运行时才能知道（因为全局变量可能是顶层对象的属性创造的，而属性的创造是动态的）
 *  程序员很容易不知不觉地就创建了全局变量
 *  顶层对象的属性是到处可以读写的，这非常不利于模块化编程
 *  `window`对象有实体含义，指的是浏览器的窗口对象，不合适。

**为了解决这些问题，ES6规定**

`var`命令和`function`命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，`let`命令、`const`命令、`class`命令声明的全局变量，不属于顶层对象的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。

var a = 1;
    // 如果在Node的REPL环境，可以写成global.a
    // 或者采用通用方法，写成this.a
    window.a // 1
    
    let b = 1;
    window.b // undefined

## global对象 ##

ES5的顶层对象，本身也是一个问题，因为它在各种实现里面是**不统一**的。

*  浏览器里面，顶层对象是`window`，但 Node 和 Web Worker 没有`window`。
 *  浏览器和 Web Worker 里面，`self`也指向顶层对象，但是Node没有`self`。
 *  Node 里面，顶层对象是`global`，但其他环境都不支持。

同一段代码为了能够在各种环境都能取到顶层对象，一般使用`this`变量，**但是有局限性**

*  全局环境中，`this`会返回顶层对象。但是，Node模块和ES6模块中，`this`返回的是当前模块。
 *  函数里面的`this`，如果函数不是作为对象的方法运行，而是单纯作为函数运行，`this`会指向顶层对象。但是，严格模式下，这时`this`会返回`undefined`。
 *  不管是严格模式，还是普通模式，`new Function('return this')()`，总是会返回全局对象。但是，如果浏览器用了CSP（Content Security Policy，内容安全政策），那么`eval`、`new Function`这些方法都可能无法使用。

现在有提案，在语言标准的层面，引入`global`作为顶层对象。也就是说，在所有环境下，`global`都是存在的，都可以从它拿到顶层对象

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FhYWFhcGlwaQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/1bc6761be44448a48f42ae83287db8fb.png
[B]: http://www.ecma-international.org/ecma-262/6.0/index.html#sec-block-level-function-declarations-web-legacy-compatibility-semantics
[Link 1]: http://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6