二、let 和 const 命令

1. let命令

1.1 基本用法

{
  let a = 10;
  var b = 1;
}

console.log(a); // ReferenceError: a is not defined.
console.log(b); // 1
1
2
3
4
5
6
7

for (let i = 0; i < 10; i++) {
  // ...
}

console.log(i);
// ReferenceError: i is not defined
1
2
3
4
5
6

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);  "相当于创建了10个 console.log(i),"
  };                 "但是i是全局的，最后变成创建了10个 console.log(10)"
}
a[6](); // 10  a[i]就是一个函数体
1
2
3
4
5
6
7

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc
"说明：函数内部的变量i与循环变量i不在同一个作用域, 为什么不是覆盖？ 因为要是命名相同变量会报错"
      "同一个作用域不可使用 let 重复声明同一个变量"
1
2
3
4
5
6
7
8
9

---

1.2 不存在变量提升

// var 的情况
console.log(foo); // 输出undefined 
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
1
2
3
4
5
6
7

---

1.3 暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;  
// 变量绑定了这个区域，所以不受外部的影响（只能考虑它在块级作用域的范围，不看外边）
}
1
2
3
4
5
6
7

ES6 明确规定，如果区块中存在let和const命令，这个 区块 对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

if (true) {
  // TDZ开始
  tmp = 'abc'; // ReferenceError  变量tmp的死区
  console.log(tmp); // ReferenceError

  let tmp;  // TDZ结束 变量tmp的死区结束
  console.log(tmp); // undefined

  tmp = 123;
  console.log(tmp); // 123
}
1
2
3
4
5
6
7
8
9
10
11

上面代码中，在let命令声明变量tmp之前，都属于变量tmp的 “死区”。
————
有些 “死区” 比较隐蔽，不太容易发现。

function bar(x = y, y = 2) {
  return [x, y];
}
bar(); // 报错
// 参数x默认值等于另一个参数y，而此时y还没有声明，属于"死区"。
1
2
3
4
5

function bar(x = 2, y = x) {
  return [x, y];
}
bar(); // [2, 2]
1
2
3
4

// 不报错
var x = x;

// 报错
let x = x;
// ReferenceError: x is not defined
// 也是因为暂时性死区（在定义之前是不能使用的）
1
2
3
4
5
6
7

• ES6 规定暂时性死区和let、const语句不出现变量提升。
• 暂时性死区的本质：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

---

1.4 不允许重复声明

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

// 报错
function func() {
  let a = 10;
  var a = 1;
}
// 报错
function func() {
  let a = 10;
  let a = 1;
}
1
2
3
4
5
6
7
8
9
10

function func(arg) {
  let arg;  // 肯定报错，因为arg在{}中能使用，所以重新定义肯定会出错
}
func() // 报错

function func(arg) {
  {
    let arg;  // 另外一个块作用域了，所以不报错
  }
}
func() // 不报错
1
2
3
4
5
6
7
8
9
10
11

---

2. 块级作用域：var声明的范围是【函数作用域】，let声明的范围是【块作用域】

2.1 为什么需要块级作用域？

ES5 只有 全局作用域 和 函数作用域，没有块级作用域，这带来很多不合理的场景。
（1）第一种常景：

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f();  // undefined  理应输出"new Date()",但是被【变量提升】截胡了
// 因为变量提升到【函数作用域的顶部】 红宝书p25
1
2
3
4
5
6
7
8
9

var声明的范围是【函数作用域】，let声明的范围是【块作用域】

// 以上代码相当于：
var tmp = new Date();
function f() {
  var tmp; 
  console.log(tmp);
  if (false) {
    tmp = 'hello world';
  }
}
f(); // undefined 
1
2
3
4
5
6
7
8
9
10

（2）用来计数的循环变量泄露为全局变量

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5  i为全局变量
1
2
3
4
5

---

2.2 ES6块级作用域、匿名立即执行函数

function f1() {
  let n = 5;
  if (true) {
    let n = 10;    
  }
  console.log(n); // 5
}
1
2
3
4
5
6
7

归根结底就是：let声明的范围是【块作用域】
ES6 允许块级作用域的任意嵌套：

{{{{  //第四层作用域
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};
// 第四层作用域无法读取第五层作用域的内部变量。

{{{{
  let insane = 'Hello World';
  {let insane = 'Hello World'}
}}}};
// 内层作用域可以定义外层作用域的同名变量。
1
2
3
4
5
6
7
8
9
10
11

块级作用域的出现，实际上使得获得【广泛应用的】匿名立即执行函数表达式（匿名 IIFE）不再必要了。

// IIFE 写法  广泛应用的匿名立即执行函数表达式 不再必要了（太好了 这傻逼写法 要死了)
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}
1
2
3
4
5
6
7
8
9
10
11

---

2.3 ☆☆☆ 块级作用域与函数声明【块作用域中的函数声明，会提升到函数作用域】

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

ES5 规定，函数只能在 顶层作用域 和 函数作用域 之中声明，不能在块级作用域声明。

// 情况一
if (true) {
  function f() {}
}

// 情况二
try {
  function f() {}
} catch(e) {
  // ...
}
1
2
3
4
5
6
7
8
9
10
11

上面两种函数声明，根据 ES5 的规定都是非法的。

ES6 引入了块级作用域，明确允许在块级作用域之中声明函数。
ES6 规定，块级作用域之中，函数声明语句的行为 类似于let，在块级作用域之外不可引用。

————

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  if (false) {
    // ES5：这个函数是在函数作用域中命名的，所以不会报错
    function f() { console.log('I am inside!'); }
  }
  f();
}());
1
2
3
4
5
6
7
8
9
10

上面代码在 ES5 中运行，会得到 “I am inside!”，因为在if内声明的函数f会 被提升到函数头部，实际运行的代码如下。

// ES5 环境
function f() { console.log('I am outside!'); }

(function () {
  function f() { console.log('I am inside!'); }  // 函数提升了，真是离谱
  if (false) {
  }
  f();
}());
//  现在的浏览器都是ES6环境了，所以运行结果见下面
1
2
3
4
5
6
7
8
9
10

————
ES6 就完全不一样了，理论上会得到 “I am outside!”。因为块级作用域内声明的函数类似于let，对作用域之外没有影响，应该报错 f is not defined，但是还是会报 f is not a function (已经被声明，但不是函数）?

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

(function () {  // ES6了
  if (false) {
    // 块作用域中的【函数变量名】提升（ES5是函数提升）
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function
1
2
3
4
5
6
7
8
9
10
11

…根据这三条规则，浏览器的 ES6 环境中，块级作用域内声明的函数，行为类似于var声明的【变量】。上面的例子实际运行的代码如下。

// 浏览器的 ES6 环境
function f() { console.log('I am outside!'); }

// 【立即执行函数】
(function () {
  var f = undefined;  // 块作用域内声明的【函数变量名】提升
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f(); 
}());   
 // Uncaught TypeError: f is not a function
1
2
3
4
5
6
7
8
9
10
11
12

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

// 块级作用域内部的函数声明语句，建议不要使用
{
  let a = 'secret';
  function f() {  // 函数声明语句
    return a;
  }
}

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {   // 函数表达式 不会发生【函数变量名】提升，因为赋值给了 
    return a;
  };
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

————
注意： ES6 的块级作用域必须有大括号，如果没有大括号，JavaScript 引擎就认为不存在块级作用域。

// 第一种写法，报错，因为没有块作用域
if (true) let x = 1;

// 第二种写法，不报错
if (true) {
  let x = 1;
}
1
2
3
4
5
6
7

• 第一种写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层，所以报错。第二种写法有大括号，所以块级作用域成立。
• 函数声明也是如此，严格模式下，函数只能声明在当前作用域的顶层。

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

// 报错
'use strict';
if (true)
  function f() {}
//  In strict mode code, functions can only be declared at top level or inside a block.
1
2
3
4
5
6
7
8
9
10
11

---

3. const命令

3.1 基本用法

---

3.2 本质

const 类似指针，简单变量，变量保存的地址不变；对于复合类型数据，地址不变，里面的内容可变；

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

const foo = {};

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

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only
1
2
3
4
5
6
7
8

const a = [];
a.push('Hello'); // 可执行
a.length = 0;    // 可执行
a = ['Dave'];    // 报错，变量保存的地址变了
1
2
3
4

其他的过一遍const内容 https://es6.ruanyifeng.com/#docs/let
————
如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});

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

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

var constantize = (obj) => {
  Object.freeze(obj);
  Object.keys(obj).forEach( (key, i) => {
    if ( typeof obj[key] === 'object' ) {
      constantize( obj[key] );
    }
  });
};
1
2
3
4
5
6
7
8

---

3.3 ES6 声明变量的六种方法【var、let、const、function、import、class】

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

---

4. 顶层对象的属性

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

window.a = 1;
a // 1

a = 2;
window.a // 2
1
2
3
4
5

顶层对象的属性与全局变量挂钩，被认为是 JavaScript 语言最大的设计败笔之一。
……

• ES6 为了改变这一点，一方面规定，为了保持兼容性，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性；
• 另一方面规定，let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。也就是说，从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

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

let b = 1;
window.b // undefined
1
2
3
4
5
6
7

上面代码中，全局变量a由var命令声明，所以它是顶层对象的属性；全局变量b由let命令声明，所以它不是顶层对象的属性，返回undefined。

---

5. globalThis 对象

---