一、前提
解決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;
物件也可以凍結
var constantize = (obj) => {
Object.freeze(obj);
Object.keys(obj).forEach( (key, i) => {
if ( typeof obj[key] === 'object' ) {
constantize( obj[key] );
}
});
};
複製程式碼ES6 宣告變數的六種方法
1. function
2. var
3. let
4. const
5. import
6. class
複製程式碼頂層物件的屬性
在瀏覽器環境指的是window物件，在 Node 指的是global物件,ES5 之中，頂層物件的屬性與全域性變數是等價的。
window.a = 1;
a // 1
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這些方法都可能無法使用。
歡迎關注 公眾號【前端開發小白】