ES6走走看看由塊級作用域引出的一場變革

es6走走看看系列，特別鳴謝奇舞讀書會~

注意：es6允許塊級作用域任意巢狀

}}}}}
複製**

因為有了塊級作用域，然後我們才有繼續往下聊的可能。

塊級宣告是用於宣告在指定塊的作用域之外無法訪問的變數。

1、宣告的變數具有塊級作用域的特性

// 例子
function getvalue (condition) 
console.log(value)
// 報錯 value is not defined
}getvalue()
複製**

2、在同乙個作用域內不能使用let宣告同名的變數

// 不管是var,const或者let,新的let宣告之前同名的變數，都會報錯
var count = 30;
let count = 40;
// 報錯 identifier 'count' has already been declared
// 函式形參和函式內部的let宣告變數重名，報錯
function
test(value) 
test()
// 報錯 identifier 'value' has already been declared
// 在不同的作用域宣告的變數重名是沒問題的
let count = 30;
if(true) 
複製**

3、宣告沒有預解析，不存在變數提公升，有「臨時死區」(tdz)

從塊的開始到變數宣告這段的區域被稱為臨時死區，es6明確規定，如果區塊中存在let和const命令，則這個區塊對這些命令宣告的變數從一開始就形成封閉作用域，只要在宣告之前就使用這些變數（賦值，引用等等），就會報錯。

if(true) 
複製**

注意：tdz是區域是「塊開始」到「變數宣告」，下面的例子不報錯

// typeof 說是相對安全，確實是，永遠拿不到想要的結果
console.log(typeof value); // 列印 undefined，沒有報錯
if(true) 
複製**

1、常量宣告的值是不可變的

注意：const宣告的物件不允許修改繫結，但可以修改該物件的屬性值。

const number = 6;
number = 5;
// 報錯 assignment to constant variable
const obj = ;
obj.number = 2; // 不報錯
obj = ;
// 報錯 assignment to constant variable
複製**

2、因為常量宣告後值就不可更改了，所以宣告時必須賦值

// 有效的常量
const count = 30;
// 報錯 missing initializer in const declaration
const name;
複製**

3、宣告的常量具有塊級作用域的特性

if(true) 
console.log(number)
// 報錯 number is not defined
複製**

4、在同乙個作用域內不能使用const宣告同名的變數

var message = 'hello';
let age = 25;
// 這兩條語句都會報錯
const message = 'good';
const age = 30;
複製**

5、宣告沒有預解析，不存在變數提公升，有「臨時死區」(tdz)

總結：一張**

宣告方式

變數提公升

作用域是否需要初始值

重複定義

var是

函式級不需要

允許let否塊級

不需要不允許

const否塊級

需要不允許

擴充套件：再提一下變數命名，不管是var、let、const宣告的變數名，可以由數字，字母，下劃線及美元符號組成，但是不能以數字開頭。美元符號可以放到任何乙個位置，甚至單獨乙個美元符號。

迴圈中的let宣告

// 第乙個對比
// before
for(var i = 0; i < 5; i++) 
console.log(i)  // 5
//after
for(let i = 0; i < 5; i++) 
console.log(i) // 報錯 i is not defined
// 第二個對比
// before
var funcs = ;
for(var i = 0; i < 10; i++) )
}funcs.foreach((ele) => )
// 列印 10次 10
// after
var funcs = ;
for(let i = 0; i < 10; i++) )
}funcs.foreach((ele) => )
// 列印 0 1 2 3 4 5 6 7 8 9
複製**

注意：有一點很重要，let 宣告在迴圈內部的行為是標準中專門定義的，它不一定與 let 不提公升特性有關。

迴圈中的const宣告

// for 迴圈會報錯
for (const i = 0; i < 1; i++) 
// 列印 0 ，然後報錯 assignment to constant variable.
// for-in 和 for-of 不會報錯
var object = ;
for (const key in object) 
// 列印 a b c
複製**

注意：const可以應用在 for-in 和 for-of 迴圈中，是因為每次迭代不會修改已有繫結，而是會建立乙個新繫結。

es6 早期

普遍認為預設使用let來替代var,對於寫保護的變數使用const

es6 使用中

普遍預設使用const，只有確實需要改變變數的值時使用let。因為大部分變數的值在初始化後不應再改變，而預料之外的變數值的改變是許多bug的源頭。這樣就可以在某種程度上實現**的不可變，從而防止某些錯誤的發生。

頂層物件，在瀏覽器環境指的是window物件，在node指的是global物件。

為了保持相容性，var命令和function命令宣告的全域性變數，依舊是頂層物件的屬性；

var a = 1;
window.a // 1
複製**

另一方面規定，let命令、const命令、class命令宣告的全域性變數，不屬於頂層物件的屬性。

上圖可見let 宣告的變數，並沒有在window物件裡，而是乙個新的script物件。

擴充套件：如果需要在瀏覽器中跨frame或window訪問**，仍然可以用var在全域性物件下定義變數。

從ecmascript 6開始，在嚴格模式下，塊裡的函式作用域為這個塊。ecmascript 6之前不建議塊級函式在嚴格模式下使用。

'use strict';
function
f() 
}f() === 1; // true
// f() === 2 在非嚴格模式下相等
複製**

注意：在非嚴格模式下不要用塊級函式，因為在非嚴格模式下，塊中函式的宣告表現奇怪，有相容性風險

if (shoulddefinezero) 
}複製**

ecmascript 6中，如果shoulddefinezero是false，則永遠不會定義zero,因為這個塊不執行。這是新標準定義的。然而，這裡存在歷史遺留問題，無論這個塊是否執行，一些瀏覽器會定義zero。

在嚴格模式下，所有支援ecmascript 6的瀏覽器以相同的方式處理：只有在shoulddefinezero為true的情況下定義zero，並且作用域只是這個塊內。

ES6走走看看 由塊級作用域引出的一場變革

ES6走走看看 由塊級作用域引出的一場變革

ES6走走看看 由塊級作用域引出的一場變革

es6 塊級作用域用法

相關推薦

ES6走走看看由塊級作用域引出的一場變革

ES6走走看看由塊級作用域引出的一場變革

ES6走走看看由塊級作用域引出的一場變革