## let和const命令 > 1.let 命令 > 2.塊級作用域 > 3.const命令 ### let命令 1.用法類似于var，但是所聲明的變量，只在let命令所在的代碼塊內有效 ~~~ { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 ~~~ 2.不存在變量提升 ~~~ // var 的情況 console.log(foo); // 輸出undefined var foo = 2; // let 的情況 console.log(bar); // 報錯ReferenceError let bar = 2; ~~~ 3.暫時性死區 ~~~ var tmp = 123; if (true) { tmp = 'abc'; // ReferenceError let tmp; } ~~~ 4.不允許重復聲明 ~~~ // 報錯 function func() { let a = 10; var a = 1; } // 報錯 function func() { let a = 10; let a = 1; } ~~~ ### 塊級作用域 > let實際上為 JavaScript 新增了塊級作用域。 一：ES5只有全局作用域和函數作用域，沒有塊級作用域，會帶來以下問題： 1. 變量提升導致內層變量可能會覆蓋外層變量 ~~~ var a = 5; function func() { console.log(a); if (true) { var a = 1; } } func(); // undefined ~~~ 2) 用來計數的循環變量泄露為全局變量 ~~~ for (var i = 0; i < 10; i++) { console.log(i); } console.log(i); // 10 ~~~ 二：ES6塊級作用域 * ES6允許塊級作用域的任意嵌套。外層作用域無法讀取內層作用域的變量。 ~~~ {{{{ {let i = 6;} console.log(i); // 報錯 }}}} ~~~ * 內層作用域可以定義外層作用域的同名變量。 ~~~ {{{{ let i = 5; {let i = 6;} }}}} ~~~ 三： 塊級作用域的出現使得立即執行函數不再需要。 > 立即執行函數： ~~~ (function() { var i = 5; })(); ~~~ > 塊級作用域 ~~~ { let i = 5; } ~~~ 四：塊級作用域與函數聲明 ES5規定，函數只能在頂層作用域和函數作用域之外聲明，不能在塊級作用域中聲明。 ~~~ if (true) { function func() {} } try { function func() {} } catch { } ~~~ 上面兩種函數聲明在ES5中都是非法的，但是瀏覽器沒有遵守這一規定，還是支持在塊級作用域中聲明函數，因此以上兩種情況實際都能運行，不會報錯；但是，在嚴格模式下，還是會報錯。 ~~~ 'use strict': if (true) { function func() {} // 報錯 } ~~~ ES6引入了塊級作用域，明確允許在塊級作用域中聲明函數。 ~~~ if (true) { function func() {} // 不報錯 } ~~~ ES6還規定，在塊級作用域中，函數聲明的行為類似于let，在塊級作用域之外不可引用。 ES6中，函數聲明會提升到函數作用域的頭部。 ~~~ function func() { console.log('out'); } (function() { if (false) { function func() { console.log(‘in’); } } func(); })(); ~~~ 在ES5中輸出：in 在ES6中輸出：out > 但是在瀏覽器中執行的時候呢會像如下一樣，導致報錯！ ~~~ function func() { console.log(‘out’); } (function() { var func = undefined; if (false) { function func() { console.log(‘in’); } } func(); })(); ~~~ >>如果改變了塊級作用域內聲明的函數的處理規則，顯然會對老代碼產生很大影響。為了減輕因此產生的不兼容問題，ES6 在附錄 B里面規定，瀏覽器的實現可以不遵守上面的規定，有自己的行為方式。 1.允許在塊級作用域內聲明函數。 2.函數聲明類似于var，即會提升到全局作用域或函數作用域的頭部。 同時，函數聲明還會提升到所在的塊級作用域的頭部 考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。如果確實需要，也應該寫成函數表達式，而不是函數聲明語句 ~~~ // 函數聲明語句 { let a = 'secret'; function f() { return a; } } // 函數表達式 { let a = 'secret'; let f = function () { return a; }; } ~~~ 另外，還有一個需要注意的地方。ES6 的塊級作用域允許聲明函數的規則，只在使用大括號的情況下成立，如果沒有使用大括號，就會報錯。 ~~~ // 不報錯 'use strict'; if (true) { function f() {} } // 報錯 'use strict'; if (true) function f() {} ~~~ ### const 語法 1. const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。 2. const一旦聲明變量，就必須立即初始化，不能留到以后賦值。 3. const的作用域與let命令相同：只在聲明所在的塊級作用域內有效。 4. const命令聲明的常量也是不提升, 只能在聲明的位置后面使用 5. const聲明的常量，也與let一樣不可重復聲明。 ~~~ if (true) { console.log(MAX); // ReferenceError const MAX = 5; } ~~~ ~~~ var message = "Hello!"; let age = 25; // 以下兩行都會報錯 const message = "Goodbye!"; const age = 30; ~~~ 6.需要注意的是const只是不允許需改內存地址，對于簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，因此等同于常量。 對于復合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指向實際數據的指針，const只能保證這個指針是固定的（即總是指向另一個固定的地址），至于它指向的數據結構是不是可變的，就完全不能控制了 ~~~ const foo = {}; // 為 foo 添加一個屬性，可以成功 foo.prop = 123; foo.prop // 123 // 將 foo 指向另一個對象，就會報錯 foo = {}; // TypeError: "foo" is read-only ~~~ ~~~ const a = []; a.push('Hello'); // 可執行 a.length = 0; // 可執行 a = ['Dave']; // 報錯 ~~~ ### 課后習題 1.請說出下面的程序執行后返回的值？ ~~~ { let i =7; } conosle.log(i);//打印出什么？ { var i = 7; } console.log(i);//打印出什么 ~~~ 2.下面的代碼有哪些問題？ ~~~ const x; x = 2; ~~~ ~~~ const b = 2; b = 3; ~~~ ~~~ let i = 3 { let i = 4; let i = 5; { let i = 6; } } ~~~ ~~~ { j = 1; let j = 3; } ~~~