ECMAScript 6（2）let 和 const

太过爱你忘了你带给我的痛 2021-09-19 12:50 291阅读 0赞

**目录**

let

const

顶层对象

获取顶层对象

--------------------

# let #

> 用来声明变量。它的用法类似于`var`，但是所声明的变量，只在`let`命令所在的代码块内有效(大括号里面if也算)。

**特点 :**

1.  **let和var相比，不存在变量提升 （即先使用后声明会报错）；**
2.  **使用let声明的变量，当前作用域里，该变量唯一  (就是只在大括号里面有效,外面认不到)。**
3.  **同一级作用域里面，只允许对一个变量使用一个let来进行声明 (一个大括号里面 不能let 两次一样的变量)**
4.  **但是不同级作用域里，是没有影响的，比如分别在父级作用域和当前作用域里声明let a各一次，是没问题的 (不在一个括号里就可以)**

> **ps : 基本上做到先声明后使用就没啥问题**

**块级作用域**

// 块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。
    // IIFE 写法 
    (function () {
      var tmp = ...;
      ...
    }());
    
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }

** 注意 : **

1.   块级作用域内部的函数声明语句，建议不要使用
2.   块级作用域内部，优先使用函数表达式

# const #

> 1. 声明一个只读的常量。一旦声明，常量的值就不能改变。  
> 2. 如果指向非按引用**简单类型**（比如字符串，布尔值等），那么该值声明后无法被修改；  
> 3. 如果指向按引用传递**复合类型数据**，则无法更改其指向的对象，但该对象的值可以被修改；  
> 4. 准确的说，是让按引用传递时，保证该const变量指向的地址不变（而非该地址里的数据不变）

**1、指向非按引用传递类型的变量，其变量值不可以被修改**

即声明后不能被修改，修改会报错；

const a = 1;
    a = 2;    //Uncaught TypeError: Assignment to constant variable.

**2、指向引用类型的变量，其值可以被修改，但是不能让其指向另外一个对象**

const a = {test: 1};
    a.test = 2;
    console.log(a.test);    //2

不能修改指向的对象：

var a = {test: 1};
    var b = {another: 2};
    const c = a;
    console.log(c);    //{test:1}
    c = b;    //Uncaught TypeError: Assignment to constant variable.

**3、不能声明const变量时不赋值**

报错 :

const a;    //Uncaught SyntaxError: Missing initializer in const declaration

**4、块级作用域，相关特性类似let**

*  块级的作用域
 *  不存在变量提升，出现暂时性死区，不能先使用后声明
 *  也不可重复声明（在同一个块级作用域内）(使用let和var同样不可）

**5、冻结对象**

const foo = Object.freeze({});
    
    // 常规模式时，下面一行不起作用；
    // 严格模式时，该行会报错
    foo.prop = 123;

除了将对象本身冻结，对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

声明深度被冻结的对象

## 顶层对象 ##

> 1.  在浏览器环境指的是`window`对象，
> 
> 2.  在 Node 指的是`global`对象。ES5 之中，
> 
> 3.  ES5 顶层对象的属性与全局变量是等价的。
> 
> 4.  ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

1.  简单的说就是由 **`var`命令声明和function **甚至 **直接写变量名 **然后进行赋值创建的对象，其变量名作为key添加到window对象中，而window里该key的值为被赋值的值。

window.a = 1;
    a // 1
    
    a = 2;
    var b = 3;
    function demo(){}
    window.a // 2
    window.c // 3
    window.demo // func

2.  而通过let、const，以及之后的class创建的对象，则不会被添加到window里面。

console.log(window.a);  //undefined
    console.log(window.b);  //undefined
    let a = 1;
    console.log(window.a);  //undefined
    const b = 2;
    console.log(window.b);  //undefined

### 获取顶层对象 ###

1.  简单来说，顶层对象在浏览器里就是window；但是在Node.js里面没有window（Web Worker也没有，他是运行在后台的js脚本）；
2.  浏览器和Web Worker里，self指向顶层对象，但是Node.js里没有self；
3.  Node里，顶层对象是global，但其他环境不支持（比如chrome里打global会告诉你未定义）；
4.  有时候我们需要用同一套代码，但在各个环境拿到顶层对象（啥时候？），所以得找个通用的办法；

// 方法一
    (typeof window !== 'undefined'
       ? window
       : (typeof process === 'object' &&
          typeof require === 'function' &&
          typeof global === 'object')
         ? global
         : this);
    
    // 方法二
    var getGlobal = function () {
      if (typeof self !== 'undefined') { return self; }
      if (typeof window !== 'undefined') { return window; }
      if (typeof global !== 'undefined') { return global; }
      throw new Error('unable to locate global object');
    };

参考文献 :  [阮一峰 ES6][ES6]

[ES6]: http://es6.ruanyifeng.com/#docs/intro