ES6学习 第一章 let 和 const 命令

Posted 2021-11-24 四冥

前言：

最近开始看阮一峰老师的《ECMAScript 6 入门》(以下简称原文)学习ECMAScript 6(下文简称ES6)的知识，整理出一些知识点加上我的理解来做成文章笔记。按照章节为单位一个章节一篇笔记。
文章代码与目录结构和原文不同。

这一章原文链接 let 和 const 命令 。

let

let 是用来声明一个变量。
不同与var会存在变量提升(下文有介绍)，let所声明的变量值只在let命令所在的代码块内有效。
同一个作用域(下文有介绍)不可使用 let 重复声明同一个变量。

注意：

• 声明变量
• 没有变量提升
• 不可重复声明
• 只在let命令所在代码块有效

let sample = 1;
sample = 2;
let sample = 2; // 将会报错

{
  let sample = 1;
  console.log(sample); // 正常输出 1
}

console.log(sample); // 将会报错，因为只在let命令所在代码块有效

const

const 是用来声明一个只读常量。
一旦声明，常量的值就不能改变。如果试着改变常量的值会报错。
并且const 在声明的时候就必须对其赋值，只声明不赋值，也会报错。
同一个作用域不可使用 const 重复声明同一个常量。
const 与let一样，都因为作用域原因，只能在所在代码块中有效。

注意：

• 声明常量
• 声明后不可以改变
• 声明的时候必须对其赋值
• 不可重复声明
• 在const命令所在代码块有效

const sample = 1;
sample = 2; // 将会报错，const 声明的变量不可以重新赋值

const sample; // 直接报错，const 声明的时候必须对其赋值

let 与 const

引入let后，已经可以代替var了，在let与const之中能用const就尽量用const。

let 与 const 不同处

let 与 const 的区别就是一个声明变量一个声明常量，变量可以重新赋值，常量不能重新赋值。

let sampleLet = 2;
const sampleConst = 1;

sampleLet = 3; // 正常
sampleConst = 3; // 报错 

let 与 const 相同处

• 都只能先声明后使用，不能变量提升。
• 都不可以在同一个作用域中重复声明
• 都只在命令所在代码块有效

{
sampleLet; // 报错
sampleConst; // 报错

let sampleLet = 2;
const sampleConst = 1;

let sampleLet = 3; // 报错
const sampleConst = 3; // 报错
}

sampleLet; // 报错
sampleConst; // 报错 

变量提升(Hoisting)

在ES6之前，使用var声明变量时会产生一种叫做变量提升的特性。
无论是在代码的哪个地方声明的，都会提升到当前作用域的最顶部，这种行为叫做变量提升。
为了纠正这种现象，let 命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错

// var 声明会变量提升，不会报错，但是值为 undefined
console.log(sampleVar); // undefined
var sampleVar = 1;

// let 声明不会变量提升，但是报错不是 not defined
console.log(sampleLet); // Cannot access sampleLet before initialization
let sampleLet = 1;

// const 声明不会变量提升，但是报错不是 not defined
console.log(sampleConst); // Cannot access sampleConst before initialization
const sampleConst = 1;

// 直接使用没有声明的变量报错为 ” is not defined “
console.log(sample); //sample is not defined

暂时性死区

ES6 规定，如果代码区块中存在 let 和 const 命令声明的变量，这个区块对这些变量从一开始就形成了封闭作用域，凡是在声明之前就使用这些变量，就会报错。直到声明语句完成，这些变量才能被访问（获取或设置），
这在语法上称为“暂时性死区”（英temporal dead zone，简 TDZ），即代码块开始到变量声明语句完成之间的区域。

var sample = 1;
if (true) {
  sample = 1;  // 报错
  let sample;
}

简单来说，就是let 和 const 命令声明的变量，在进入这个声明代码所在的作用域时，就已经存在，但是不可以获取或使用，直到声明语句完成，才可以访问。

块级作用域

作用域（scope，或译有效范围）就是变量和函数的可访问范围，即作用域控制着变量和函数的可见性和生命周期。

let与const 块级作用域

作用域并不是ES6的新东西，但是在ES5只有全局作用域和函数作用域，为了解决块级作用域，ES6可以使用**let**与**const**声明一个块级作用域的变量。​
var 声明的变量具有变量提升特性，所以没有块的概念，可以跨块访问，但不能跨函数。
外层作用域无法读取内层作用域的变量。

{ // 块作用域
  var sampleVar = 1;
  let sampleLet = 2;
  const sampleConst = 3;
  console.log(sampleVar); // 成功输出 1
  console.log(sampleLet); // 成功输出 2
  console.log(sampleConst); // 成功输出 3
}
console.log(sampleVar); // 成功输出 1
console.log(sampleLet); // 报错  not defined
console.log(sampleConst); // 报错  not defined

​
ES6 允许块级作用域的任意嵌套。
同一个作用域不可使用let或const声明同一个变量，内层作用域可以定义外层作用域的同名变量。

{
  {
    {
      let sample = Hello World; // 外层作用域
      { let sample = sample; } // 不报错
      { console.log(sample); }  // 正常输出 ‘Hello World’
    }
  }
}

块级作用域与函数声明

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

/* 
    ES5，这两种情况都是不合法的，因为这两个函数声明都是在块作用域中声明。
  但应为浏览器为了兼容以前的旧代码，还是支持在块级作用域之中声明函数。所以不会报错
*/ 

if (true) {
  function sampleFn() {}
}

try {
  function sampleFn() {}
} catch(e) {
  // ...
}

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

if (true) {
  sampleFn();  // 正常输出，函数声明语句的行为类似于let
  function sampleFn() {
    console.log(Hello World);
  }
}

// 但其实在块级作用域之外也可以引用函数，只不过值为undefined

if (false) {
  function sampleFn() { console.log(Hello World); }
}
console.log(sampleFn); // 正常输出 undefined
sampleFn(); // 报错为sampleFdddn is not defined 

为什么块级作用域之外也可以引用函数呢？
如果改变了块级作用域内声明的函数的处理规则，显然会对老代码产生很大影响。为了减轻因此产生的不兼容问题，ES6 在附录 B里面规定，浏览器的实现可以不遵守上面的规定(指函数声明语句的行为)，有自己的行为方式。

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

注意，上面三条规则只对 ES6 的浏览器实现有效，其他环境的实现不用遵守，还是将块级作用域的函数声明当作let处理。

我们应该避免在块级作用域内声明函数。如果确实需要，也应该写成函数表达式，而不是函数声明语句。

// 函数声明语句，不要在块作用域中使用，因为会有变量提升
{
  function sampleFn() {
    console.log("Hello World");
  }
}

// 函数表达式，在块作用域中，函数不会有变量提升
{ 
  const sampleFn = function () {
    console.log("Hello World");
  }
}

顶层对象

顶层对象，在浏览器环境指的是window对象。
ES5 之中，顶层对象的属性与全局变量是等价的。
ES6 为了改变这一点，
一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；
另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

/*
    ES5 之中，顶层对象的属性赋值与全局变量的赋值，是同一件事。
*/

window.sample = 1;
console.log(window.sample); // 正常输出 1
sample = 2;
console.log(window.sample);// 正常输出 2

/*
    ES6 之中，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
*/

var sampleVar = 1;
console.log(window.sampleVar)  // 正常输出 1
let sampleLet = 1;
console.log(window.sampleLet) // 正常输出 undefined
let sampleConst = 1;
console.log(window.sampleConst) // 正常输出 undefined

window提供全局环境（即全局作用域）所有代码都是在这个环境中运行。

函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象。但是，严格模式下，这时this会返回undefined。
不管是严格模式，还是普通模式，new Function(return this)()，总是会返回全局对象。

function sampleFn(){
  console.log(this);
}
sampleFn(); // 正常输出 输出全局对象 window

function sampleFn1(){
  "use strict";
  console.log(this)
}
sampleFn1(); // 正常输出 undefined

// 开启严格模式
"use strict";
const sample  = new Function(return this)();
console.log(sample); // 正常输出 输出全局对象 window