es6复习——let和const

babel

将es6转为es5格式，有两个字段

  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

presets指定转码规则，plugin是插件

let命令

不存在变量提升

用let生命的变量只在声明的块内有效，用var声明的变量会“变量提升”，因此用let声明的变量必须在声明之后调用，否则就会报错

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

暂时性死区

let声明的变量会将作用于绑定到（binding）这个区域，不受外部的影响,在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

上面的代码中，tmp后面声明了tmp，所以作用域被绑定到if内，所以报错。

比较隐蔽的死区


 

    function bar(x = y, y = 2) {
      return [x, y];
    }
    
    bar(); // 报错

上面的代码中，x=y,y还没有被声明因此报错

不允许重复声明

let 不允许在同一个作用域内重复声明同一个变量

//报错
function func(){
let a=1;
var a=10;
}
//报错
function func(){
let a=10;
leta=20;
}
//不可以在函数内重复声明参数
function args(arg){
let arg;
}
func()//报错
function args(arg){
let arg=10;
}
func()//不报错

es6 块级作用域

es5没有块级作用域带来的不便

第一种情形：内层变量会覆盖外层变量

var  tmp=10;
function func(){
console.log(temp);
if(false){
tmp=20;
}
}
func()//输出undefine，上面的低吗相当于
function func(){
console.log(tmp);
tmp=20;
if(false){}
}

第二种情形：用作计数的变量泄露为全局变量

for(var i=0;i<5;i++){
}
console.log(i)//5
上面的i没有消失并且泄露为全局变量

es6的块级作用域

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}

ES6 允许块级作用域的任意嵌套。外层作用域无法读取内层作用域的变量

{{{{{let insane = 'Hello World'}}}}};

es6规定函数可以在块级作用域声明

function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // 重复声明一次函数f
    function f() { console.log('I am inside!'); }
  }

  f();//es5输出为'I am inside!'，es6输出为报错
}());

允许在块级作用域内声明函数。
函数声明类似于var，即会提升到全局作用域或函数作用域的头部。
同时，函数声明还会提升到所在的块级作用域的头部。

考虑到环境导致的行为差异太大，应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

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

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

另外，还有一个需要注意的地方。ES6 的块级作用域允许声明函数的规则，只在使用大括号的情况下成立，如果没有使用大括号，就会报错。

// 不报错
'use strict';
if (true) {
  function f() {}
}

// 报错
'use strict';
if (true)
  function f() {}

const

const声明了一个只读常量，改变量必须初始化，作用域和let相同，存在和let一样的暂时性死区，同样不可重复声明

var message = "Hello!";
let age = 25;

// 以下两行都会报错
const message = "Goodbye!";
const age = 30;

基本用法

本质

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const foo = {};

// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错

如果想对象本身冻结，可以使用object.freeze方法

const foo = Object.freeze({});

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

es6声明变量的六种方式

ES5 只有两种声明变量的方法：var命令和function命令。ES6 除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有 6 种声明变量的方法。

顶层对象属性

浏览器环境的顶层对象是window，node环境是global
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对象

浏览器里面，顶层对象是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都是存在的，都可以从它拿到顶层对象。

垫片库system.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();