ES6入门之let、cont

jiezi

6 年前

一、前提
解决 ES5 中只有全局作用域和函数作用域，没有块级作用域而带来的不合理的场景。
let

基本用法
用法和 var 一样，只是 let 声明的变量只有在 let 命令所在的代码块有效
{
let a = 10;
var b = 1;
}

a // ReferenceError: a is not defined.
b // 1
可以看出 var 声明的变量在代码块之外也是可以调用，而 let 声明的则调用报错。所以 let 声明只在它声明的当前代码块中才能调用。

变量提升
在使用 var 的时候会出现“变量提升”的现象，即变量可以在声明之前使用，值为 undefined。let 改变了这种现状，但是必须先声明在使用，如果在声明之前使用则会出现报错。如下：
// var 的情况
console.log(foo); // 输出 undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错 ReferenceError
let bar = 2;
暂时性死区
只要块级作用域内部存在 let 或者 const 命令，它所声明的变量就“绑定”在这个区域，不会受外部影响。且暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。如下：
var tmp = 123;

if (true) {
tmp = ‘abc’; // ReferenceError
let tmp;
}
ES6 明确规定，如果区块中存在 let 和 const 命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用 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
}
注意：
++ 使用 let 声明变量时，只要变量在还没有声明完成前使用，就会报错。上面这行就属于这个情况，在变量 x 的声明语句还没有执行完成前，就去取 x 的值，导致报错”x 未定义“。++
不允许重复声明
let 不允许在同一个作用域内声明同一个变量，如下：
// 报错
function func() {
let a = 10;
var a = 1;
}

// 报错
function func() {
let a = 10;
let a = 1;
}
或者如下：
function func(arg) {
let arg;
}
func() // 报错

function func(arg) {
{
let arg;
}
}
func() // 不报错
块级作用域
上面也提到过在 es5 中没有块级作用域的概念，只有函数作用域和全局作用域，那么就带来了一些问题，如下：
var tmp = new Date();

function f() {
console.log(tmp);
if (false) {
var tmp = ‘hello world’;
}
}

f(); // undefined

外层声明被内层声明所覆盖，内层使用的是外层的声明，内层变量提升导致 undefinded
第二种：计数循环全局泄露，如下：
var s = ‘hello’;

for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}

console.log(i); // 5

常见的面试题，最后输出不是预料中的 1 2 3 4 5 而全部是 5
ES6 的块级作用域，实际上就是 let 新增的，如下：
function f1() {
let n = 5;
if (true) {
let n = 10;
}
console.log(n); // 5
}

内外层的 n 互不干扰
ES6 中允许作用域任意嵌套，并且互不干扰，如下：
内外层可以同名

{{{{
let insane = ‘Hello World’;
{let insane = ‘Hello World’}
}}}};

或者

{{{{
{let insane = ‘Hello World’}
console.log(insane); // 报错
}}}};
块级作用域的出现可以让以下立即执行函数的写法不必要，如下：
// IIFE 写法
(function () {
var tmp = …;
…
}());

// 块级作用域写法
{
let tmp = …;
…
}
块级作用域和函数声明
在 ES5 中，函数只能在顶层作用域和函数作用域中声明，不能在块级作用域中声明，但是浏览器为了兼容性，还是可以在块级作用域中声明，理论上在 ES6 中块级作用域中声明的函数，在外部调用会报错，考虑环境的问题，应当避免在块级作用域中声明函数，如果需要也应当写成函数表达式的方式，而不是函数声明语句，如下：
// 函数声明语句
{
let a = ‘secret’;
function f() {
return a;
}
}

// 函数表达式
{
let a = ‘secret’;
let f = function () {
return a;
};
}
const
const 声明的是一个常量如下：
const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.
声明之后如果在赋值，将会报错，同时因为声明的是常量，即 const 声明后即要赋值不然也会报错
const 和 let 相同，声明也只在当前的块级作用域生效。同样也不会声明提升，也存在暂时死区，只能在声明之后使用，且和 let 一样不得重复声明，不能重新赋值。
重要：
const 所不能改变的并不是值，而是变量指向的那个内存地址所保存的值不能变动，对于简单类型（数值、字符串、布尔值），值就保存在变量所指向的内存地址中，因此等同于常量。而对于复合类型（数组、对象），变量指向的内存地址，保存的只是一个指向实际数据的指针，const 只能保证这个指针是固定的（即总指向一个固定的地址）。至于它指向的数据结构则是不能控制的，如下：
const foo = {};

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

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

常量 foo 储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，
即不能把 foo 指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。
或者
const a = [];
a.push(‘Hello’); // 可执行
a.length = 0; // 可执行
a = [‘Dave’]; // 报错

常量 a 是一个数组，这个数组本身是可写的，但是如果将另一个数组赋值给 a，就会报错
如果真的想将声明对象冻结，不能在改变则应该使用 object.freeze()

const foo = Object.freeze({});

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

对象也可以冻结

a = 2;
window.a // 2
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 这些方法都可能无法使用。

欢迎关注公众号【前端开发小白】