ES6学习第一章 let 和 const 命令 _第一章

关山初度尘未洗，策马扬鞭再奋蹄！这篇文章主要讲述ES6学习第一章 let 和 const 命令相关的知识，希望能为你提供帮助。
前言：【ES6学习第一章 let 和 const 命令】最近开始看阮一峰老师的《ECMAScript 6 入门》(以下简称原文)学习ECMAScript 6(下文简称ES6)的知识，整理出一些知识点加上我的理解来做成文章笔记。按照章节为单位一个章节一篇笔记。
文章代码与目录结构和原文不同。
这一章原文链接 let 和 const 命令。
letlet 是用来声明一个变量。
不同与var会存在变量提升(下文有介绍)，let所声明的变量值只在let命令所在的代码块内有效。
同一个作用域(下文有介绍)不可使用 let 重复声明同一个变量。
注意：

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

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

{ let sample = 1; console.log(sample); // 正常输出 1 }console.log(sample); // 将会报错，因为只在let命令所在代码块有效

constconst 是用来声明一个只读常量。
一旦声明，常量的值就不能改变。如果试着改变常量的值会报错。
并且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); } }// 但其实在块级作用域之外也可以引用函数，只不过值为undefinedif (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(); // 正常输出输出全局对象 windowfunction sampleFn1(){ "use strict"; console.log(this) } sampleFn1(); // 正常输出 undefined// 开启严格模式 "use strict"; const sample= new Function(return this)(); console.log(sample); // 正常输出输出全局对象 window