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();