阮一峰es6阅读笔记 — let和const命令

一、let和const命令

（1）let 和 var的区别

1⃣️ 声明提前问题：let不会像var一样声明提前，

2⃣️ 作用范围：let只会在代码块内部有效；var则在全局范围有效。

let非常适用于for循环：变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量。

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

如果使用var声明，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的函数里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。 

var a = [];
for (var i = 0; i < 10; i++) {
    //向a这个数组中每个索引都绑定这个函数
    a[i] = function () {
         console.log(i);
     };
}
//a数组中的第六个函数，调用
a[6](); // 10

此外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
//这里相当于是两个独立的i，如果上面的条件部分换成a=0也是成立的
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

for(let i = 0; i<3; i++){
    var i ="abc";
    console.log(i);
};
// abc
//只会输出一次，因为var关键字已经把全局范围内的i给改变了

for(var i=0; i<3;i++){
    let i ="abc";
    console.log(i);
};
//abc
//abc
//abc
//这里let没办法改变var出来的i值，所以是各自独立的部分

3⃣️ 暂时性死区（tdz = temperal dead zone）

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

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

存在全局变量tmp，但是在代码块中又用let声明了局部变量tmp, 这个局部变量绑定了该块级作用域，所以在声明前赋值会报错（证明绑定的并不是全局变量）。

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

在let声明tmp之前，都属于tmp变量的死区。

 console.log(typeof x);
    let x; // ReferenceError

上面代码中，变量x使用let命令声明，所以在声明之前，都属于x的“死区”，只要用到该变量就会报错。因此，typeof运行时就会抛出一个ReferenceError。

作为比较，如果一个变量根本没有被声明，使用typeof反而不会报错。

 console.log(typeof y);
//undefined

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

上述代码中，x默认值等于另一个参数y，这个赋值过程中y还没有被声明，所以报错。

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

var x = x;// 不报错
//本质上：
var x = undefined;//变量声明+初始化为defined
x=x;//赋值


let x = x;// 报错
// ReferenceError: x is not defined
//这里初始化undefined以及赋值是同时进行的，赋值是x还没有初始化为undefined，所以报错，报错的同时会取消x的初始化

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

// 报错
function func() {
  let a = 10;
  var a = 1;
}
// 报错
function func() {
  let a = 10;
  let a = 1;
}

function func(arg) {
  let arg;
}
func() // 报错
//不能在函数内部重新声明参数，因为参数已经声明了arg,同作用域只能声明一次。

function func(arg) {
  {
    let arg;
  }
}
func() // 不报错
//加了{}属于不同的作用域，互不影响。

二、块级作用域

（1）es5中只有全局作用域和函数作用域，这会带来很多不便：

1⃣️ 内层变量覆盖外层变量

var tmp = new Date();
//var tmp = undefined；

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
//这里导致变量提升，在函数f()定义前就var tmp= undefined；了，如果不使用var关键字是可以的
  }
}
f(); // undefined

2⃣️ 用来计数的循环变量泄漏为全局变量

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

循环结束后，i并没有消失，泄漏成了全局变量。

(2) 解决方法：let实际上为js增加了块级作用域。

function f1() {
  let n = 5;
  if (true) {
    let n = 10;
  }
  console.log(n); // 5
}
//使用let最后得出的结果是5说明外层代码不受内层代码影响。如果使用var关键字，输出的则会是10.

ES6 允许块级作用域的任意嵌套，内层作用域也可以定义外层作用域同名变量。

{{{{
  {let insane = 'Hello World'}
  console.log(insane); // 报错
}}}};

{let ins = "hello world";
    {let ins = "nihao";}
};

同时，块级作用域的出现也使得匿名立即执行函数不再必要，因为匿名IIFE的常见使用场景就是隔离变量，使得其他地方可以声明同名变量。

（3）块级作用域和函数声明

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

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

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

// ES5 环境
function f() { console.log('I am outside!'); }
(function () {
  function f() { console.log('I am inside!'); } //注意这里函数提升了
  if (false) {
  }
  f();
}());// I am inside!

// 浏览器的 ES6 环境下运行上述代码
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined; //这里只是提前声明了函数f，还没有完成赋值
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function

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

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

// 块级作用域内部，优先使用函数表达式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

es6的块级作用域必须有大括号，没有则不认为存在该作用域。

// 第一种写法，报错
if (true) let x = 1;
//该写法没有大括号，所以不存在块级作用域，而let只能出现在当前作用域的顶层。


if (true) {
  let x = 1;
}

三、const命令

（1）基本用法

const声明一个只读常量，一旦声明，常量的值就无法再改变。这一位子，const一旦声明就必须立刻初始化，不能留到后面再赋值。

和let一样，const只在声明所在的块级作用域有效，其所声明的常量也不会有声明提升，同时也存在tdz，只能在声明的位置后使用，并且不可以重复声明。

（2）本质

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

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123
// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

上面代码中，常量foo储存的是一个地址，这个地址指向一个对象。不可变的只是这个地址，即不能把foo指向另一个地址，但对象本身是可变的，所以依然可以为其添加新属性。

如果真的想将对象冻结，应该使用Object.freeze方法。

const foo = Object.freeze({});
// 常规模式时，下面一行不起作用；
// 严格模式时，该行会报错，因为foo指向的是一个被冻结的对象，无法添加新的属性了
foo.prop = 123;

四、顶层对象的属性

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

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

五. globalThis对象，可以在任何环境下都取到顶层对象。