一、前提

解決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); // 輸出undefinedvar foo = 2;// let 的情況console.log(bar); // 報錯ReferenceErrorlet 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.1415PI = 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 // 1a = 2;window.a // 2

global 對象

ES5 的頂層對象，本身也是一個問題，因為它在各種實現里面是不統一的。

1. 瀏覽器里面，頂層對象是window，但 Node 和 Web Worker 沒有window。
2. 瀏覽器和 Web Worker 里面，self也指向頂層對象，但是 Node 沒有self。
3. Node 里面，頂層對象是global，但其他環境都不支持。

同一段代碼為了能夠在各種環境，都能取到頂層對象，現在一般是使用this變量，但是有局限性。

1. 全局環境中，this會返回頂層對象。但是，Node 模塊和 ES6 模塊中，this返回的是當前模塊。
2. 函數里面的this，如果函數不是作為對象的方法運行，而是單純作為函數運行，this會指向頂層對象。但是，嚴格模式下，這時this會返回undefined。
3. 不管是嚴格模式，還是普通模式，new Function('return this')() ，總是會返回全局對象。但是，如果瀏覽器用了 CSP（Content Security Policy，內容安全策略），那么eval、new Function這些方法都可能無法使用。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VeVb武林網的支持。