ES6 1. let和const命令详解

1 let命令

1. 只在所在代码块内有效

2. 在for循环内更适合使用

3. 阻止变量提升（初始化参数后才可正常使用，否则抛出错误）

4. 暂时性死区（TDZ:当块级作用域内存在let，则其声明的变量就绑定在这个区域，不再受外部的影响）

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

5. 不允许在相同作用域内重复声明变量

   function func(arg){
     let arg; // 报错
   }
   
   function func(arg){
     {
       let arg; // 不报错
     }
   }
   

2 块级作用域

2.1 为什么需要块级作用域

1. 内层变量可能会覆盖外层变量
2. 用来计数的循环变量泄露为全局变量

2.2 ES6的块级作用域

1. 外层代码块不受内层代码块的影响
2. 内层作用域可以定义外层作用域的同名变量
3. 可取代立即执行匿名函数（IIFE）

2.3 块级作用域与函数声明

1. 允许在块级作用域内声明函数

2. 函数声明类似于var，即会提升到全局作用域或函数作用域的头部

3. 同时，函数声明还会提升到所在的块级作用域的头部

4. 尽可能避免在块级作用域内声明函数，如果需要则尽可能写成函数表达式

   // 函数声明语句
   {
     let a = 'secret';
     function f() {
       return a;
     }
   }
   
   // 函数表达式
   {
     let a = 'secret';
     let f = function () {
       return a;
     };
   }
   

2.4 do表达式（目前为提案）

获取块级作用域最后一个语句的结果值。

let x = do {
  let t = f();
  t*t = 1;
}

3 const命令

3.1 基本用法

1. 声明只读常量
2. 声明后立即初始化，不可以后赋值
3. 类似于let命令，只在声明所在的块级作用域内有效
4. 变量不会提升，同样存在暂时性死区
5. 不可重复声明

3.2 本质

并不是变量的值不得改动，而是变量指向的内存地址不得改动。

对于简单类型的数据（数值、字符串、布尔值）而言，值就保存在变量指向的内存地址中，因此等同于变量。

但是对于复合类型的数据（主要是对象和数组）而言，变量指向的内存地址保存的只是一个指针，const只能保证这个指针式固定的，至于它指向的数据结构是不是可变的，这完全不能控制。

const foo = {};

foo.prop = 123; // 正确

foo = {}; // TypeError: "foo" is read-only

如果想把对象冻结，应该使用Object.freeze({})；

const foo = Object.freeze({});

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

3.3 ES6声明变量的6种方式

• var
• function
• let
• const
• import
• class

4 顶层对象的属性

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

顶层对象的属性与变量相关，被认为JavaScript语言中的最大的设计败笔之一

• 无法在编译时就提示变量未声明的错误，只有运行是才知道
• 很容易不知不觉地创建全局变量
• 顶层对象的属性是到处都可以读写的，非常不利于模块化编程
• window对象有实体含义，指的是浏览器的窗口对象

解决方案

ES6开始，全局变量逐步与顶层对象的属性隔离，var命令和function命令声明的全局变量依旧是顶层对象的属性；let命令、const命令、class命令声明的全局变量不属于顶层对象的属性。

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

let b = 1;
window.b // undefined

5 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这些方法都可能无法使用。

综上所述，很难找到一种方法可以在所有情况下都取到顶层对象。以下是两种勉强可以使用的方法

// 方法一
(typeof window !== 'undefined'
	? window
 	: (typeof process === 'object' &&
    typeof require === 'function' &&
    typeof global === 'obejct')
 	? 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');
}

提案

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

// 下面的代码可以保证，在各种环境中global对象都是存在的
// CommonJS的写法
require('system.global/shim')();

// ES6模块的写法
import shim from 'system.global/shim'; shim();

// 下面的代码将顶层对象放入变量global中
// CommonJS的写法
var global = require('system.global')();

// ES6模块的写法
import getGlobal from 'system.global';
const global = getGlobal();