let和const命令 · 前端筆記

[TOC] # let命令 ## 塊級作用域 lei用法與var類似，但所聲明的變量只在let坐在的代碼塊內有效。 ``` for(let i = 0; i < 10; i++){} i // ReferenceError ``` ``` var a = [] undefined for(var i = 0; i<10;i++) { a[i] = function(){ console.log(i) } } a[6]() // 10 ``` 變量i是var聲明的，在全局范圍有效，i的值為最后一次輸出的值。如果用let，聲明的變量僅在塊級作用域有效，最后輸出6 ``` var a = [] undefined for(let i = 0; i<10;i++) { a[i] = function(){ console.log(i) } } a[6]() // 6 ``` ## 不存在變量提升 ``` console.log(foo) // ReferenceError let foo = 2 ``` 這也意味著typeof不再是絕對安全的操作 ``` typeof x // ReferenceError let x ``` ## 暫時性死區只要塊級作用域內存在let命令，它所聲明的變量就不會受外部影響。 ``` var tmp = '123' if(true) { tmp = 'abc' //ReferenceError let tmp } ``` 上面代碼中，存在全局變量`tmp`，但是塊級作用域內`let`又聲明了一個局部變量`tmp`，導致后者綁定這個塊級作用域，所以在`let`聲明變量前，對`tmp`賦值會報錯。 ES6 明確規定，如果區塊中存在`let`和`const`命令，這個區塊對這些命令聲明的變量，從一開始就形成了封閉作用域。凡是在聲明之前就使用這些變量，就會報錯。總之，在代碼塊內，使用`let`命令聲明變量之前，該變量都是不可用的。這在語法上，稱為“**暫時性死區**”（temporal dead zone，簡稱 TDZ）。 <br> 有些“死區”比較隱蔽。 ``` function bar(x = y, y = 2) { return [x,y] } bar() //報錯 ``` 調用bar會報錯是因為參數x的默認值等于另一個參數y，此時y還沒聲明，屬于“死區”。如果y的默認值是x，則不會報錯。 ``` function bar(x = 2, y = x) { return [x,y] } bar() // [2, 2] ``` ## 不允許重復聲明 let不允許在相同作用域內重復聲明同一個變量 ``` function b() { let a = 10 // 報錯 var a = 10 } b() // 報錯 ``` ``` function b() { let a = 10 // 報錯 let a = 10 } ``` ``` function bar(arg) { let arg // 報錯 } ``` ``` function bar(arg) { { let arg // 不報錯 } } ``` # 塊級作用域 ES5 只有全局作用域和函數作用域，沒有塊級作用域，這帶來很多不合理的場景。第一種場景，內層變量可能會覆蓋外層變量。 ~~~javascript var tmp = new Date(); function f() { console.log(tmp); if (false) { var tmp = 'hello world'; } } f(); // undefined ~~~ 第二種場景，用來計數的循環變量泄露為全局變量。 ~~~javascript var s = 'hello'; for (var i = 0; i < s.length; i++) { console.log(s[i]); } console.log(i); // 5 ~~~ ## ES6 的塊級作用域 `let`實際上為 JavaScript 新增了塊級作用域。 ~~~javascript function f1() { let n = 5; if (true) { let n = 10; } console.log(n); // 5 } ~~~ 上面的函數有兩個代碼塊，都聲明了變量`n`，運行后輸出 5。這表示外層代碼塊不受內層代碼塊的影響。如果兩次都使用`var`定義變量`n`，最后輸出的值才是 10。 ES6 允許塊級作用域的任意嵌套。 ~~~javascript {{{{{let insane = 'Hello World'}}}}}; ~~~ 上面代碼使用了一個五層的塊級作用域。外層作用域無法讀取內層作用域的變量。 ~~~javascript {{{{ {let insane = 'Hello World'} console.log(insane); // 報錯 }}}}; ~~~ 塊級作用域的出現，實際上使得獲得廣泛應用的立即執行函數表達式（IIFE）不再必要了。 ~~~javascript // IIFE 寫法 (function () { var tmp = ...; ... }()); // 塊級作用域寫法 { let tmp = ...; ... } ~~~ ### 塊級作用域與函數聲明函數能不能在塊級作用域之中聲明？這是一個相當令人混淆的問題。 ES5 規定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。 ~~~javascript // 情況一 if (true) { function f() {} } // 情況二 try { function f() {} } catch(e) { // ... } ~~~ 上面兩種函數聲明，根據 ES5 的規定都是非法的。但是，瀏覽器沒有遵守這個規定，為了兼容以前的舊代碼，還是支持在塊級作用域之中聲明函數，因此上面兩種情況實際都能運行，不會報錯。 ES6 引入了塊級作用域，明確允許在塊級作用域之中聲明函數。ES6 規定，塊級作用域之中，函數聲明語句的行為類似于`let`，在塊級作用域之外不可引用。 ~~~javascript function f() { console.log('I am outside!'); } (function () { if (false) { // 重復聲明一次函數f function f() { console.log('I am inside!'); } } f(); }()); ~~~ 上面代碼在 ES5 中運行，會得到“I am inside!”，因為在`if`內聲明的函數`f`會被提升到函數頭部，實際運行的代碼如下。 ~~~javascript // ES5 環境 function f() { console.log('I am outside!'); } (function () { function f() { console.log('I am inside!'); } if (false) { } f(); }()); ~~~ ES6 就完全不一樣了，理論上會得到“I am outside!”。因為塊級作用域內聲明的函數類似于`let`，對作用域之外沒有影響。但是，如果你真的在 ES6 瀏覽器中運行一下上面的代碼，是會報錯的，這是為什么呢？原來，如果改變了塊級作用域內聲明的函數的處理規則，顯然會對老代碼產生很大影響。為了減輕因此產生的不兼容問題，ES6 在[附錄 B](http://www.ecma-international.org/ecma-262/6.0/index.html#sec-block-level-function-declarations-web-legacy-compatibility-semantics)里面規定，瀏覽器的實現可以不遵守上面的規定，有自己的[行為方式](http://stackoverflow.com/questions/31419897/what-are-the-precise-semantics-of-block-level-functions-in-es6)。 * 允許在塊級作用域內聲明函數。 * 函數聲明類似于`var`，即會提升到全局作用域或函數作用域的頭部。 * 同時，函數聲明還會提升到所在的塊級作用域的頭部。注意，上面三條規則只對 ES6 的瀏覽器實現有效，其他環境的實現不用遵守，還是將塊級作用域的函數聲明當作`let`處理。根據這三條規則，在瀏覽器的 ES6 環境中，塊級作用域內聲明的函數，行為類似于`var`聲明的變量。 ~~~javascript // 瀏覽器的 ES6 環境 function f() { console.log('I am outside!'); } (function () { if (false) { // 重復聲明一次函數f function f() { console.log('I am inside!'); } } f(); }()); // Uncaught TypeError: f is not a function ~~~ 上面的代碼在符合 ES6 的瀏覽器中，都會報錯，因為實際運行的是下面的代碼。 ~~~javascript // 瀏覽器的 ES6 環境 function f() { console.log('I am outside!'); } (function () { var f = undefined; if (false) { function f() { console.log('I am inside!'); } } f(); }()); // Uncaught TypeError: f is not a function ~~~ 考慮到環境導致的行為差異太大，應該避免在塊級作用域內聲明函數。如果確實需要，也應該寫成函數表達式，而不是函數聲明語句。 ~~~javascript // 函數聲明語句 { let a = 'secret'; function f() { return a; } } // 函數表達式 { let a = 'secret'; let f = function () { return a; }; } ~~~ 另外，還有一個需要注意的地方。ES6 的塊級作用域允許聲明函數的規則，只在使用大括號的情況下成立，如果沒有使用大括號，就會報錯。 ~~~javascript // 不報錯 'use strict'; if (true) { function f() {} } // 報錯 'use strict'; if (true) function f() {} ~~~ <br> # const命令 const用來聲明變量。一旦聲明，其值就不能改變。 ``` const PI = 3.1415 PI // 3.1415 PI = 3 //TypeError: "PI" is read-only ``` const一旦聲明變量，就必須立即初始化，不能以后賦值。 ``` const foo; // SyntaxError: missing = in const declaration ``` const的作用域與let相同，只在聲明的塊級作用域有效；聲明的常亮不提升；存在暫時性死區；只能在聲明后使用；不可重復聲明。對于復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const命令只保證變量名指向的地址不變，不保證該地址的數據不變。 ``` const foo = {} foo.prop = 123 foo.prop // 123 foo= {} //TypeError ``` ``` const a = [] a.push('hello') // 可執行 a.length = 0 // 可執行 a = ['aa'] // 報錯 ``` 若想凍結對象，應該使用Object.freeze方法。 ``` const foo = Object.freeze({}) ``` 除了凍結對象本身，對象的屬性也應凍結。 ## 跨模塊常量設置跨模塊的變量 ``` // constants.js export const A = 1 export const B = 1 ``` ``` // test1.js import * as constants from './constants.js' console.log(constants.A) ``` ``` // test2.js import {A, B} from './contants' console.log(A) ``` ## 全局對象的屬性 let、const和class命令聲明的全局變量不屬于全局對象的屬性 ``` var a = 1 window.a // 1 let b = 2 window.b // undefinded ``` # 參考資料 [ECMAScript 6 入門](http://es6.ruanyifeng.com/#docs/let#%E5%9D%97%E7%BA%A7%E4%BD%9C%E7%94%A8%E5%9F%9F)