ES6 let和const

實心爆米花發表於2019-02-24

首先

if(a){
	var num = 100
}
console.log(num)

其實很容易 ,具體的過程相信也不用多嘮叨 ,由於變數提升,定義num的步驟被提到了前面,所以在本例中,如果a為假,那麼結果是undefined
還有 在一個迴圈中,

for(var i = 0; i < 10; i++){}
console.log(i)			//i=10

再迴圈之後 我們依然可以訪問到本應該只在迴圈體內出現的i.這些資料的生存週期和範圍讓人感覺很不嚴謹,在實際開發過程中就可能會造成意料之外的結果,為了變數的生存空間的到更好的控制,es6引入了塊級作用域這一說法,主要存在於 函式體內 以及{}之間的程式碼塊中

要強調的一點是 在塊級作用域中,要儘量避免去使用函式宣告,原因是 在使用函式宣告的過程中相當於使用var,即會提升到當前作用域的頂部,這不是我們想要的,解決辦法是儘量使用函式表示式代替函式宣告

let

  • 1 不會造成剛才說的變數提升
if(a){
	var num = 100
}
console.log(num)

報錯

  • 2 重複宣告(一個作用域中)
var i = 1;
let i = 2

報錯

  • 3 不會委託到頂層物件 ,即var a = 1,則 window.a = 1,但是let a = 1,在window物件就找不到a這個屬性了 。說道頂層物件也做一個總結

瀏覽器裡面,頂層物件是window,但 Node 和 Web Worker 沒有window。
瀏覽器和 Web Worker 裡面,self也指向頂層物件,但是 Node 沒有self。
Node 裡面,頂層物件是global,但其他環境都不支援。

const

const讓js定義資料的時候也有了語義的成分,即定義常量。const變數指向的記憶體地址所儲存的資料是不能修改的,對於簡單資料型別來說,資料的值就儲存在變數所指向的記憶體地址,所以的確是不能改變的,但是對於複合資料型別來說,變數指向的記憶體空間儲存的是指向實際資料的指標。也就是說const只能保證這個指標指向的地址不會變,但是她指向的資料是否可以改變則不受控制。

臨時性死區

JavaScript引擎在掃描程式碼時,遇見的變數(var定義)就會提升至當前作用域頂端,let ,const定義就會將變數放進TDZ(暫時性死區)中,在訪問到暫時性死區中的變數時會觸發執行時錯誤導致報錯,只有在執行變數宣告語句後才會將變數從死區中釋放出來

var data = 'a';
(function(){
	console.log(data);
	let data = 'b';
}())

例子更直觀些,由於在作用域中let宣告被放入暫時性死區 ,所以列印會報錯

在迴圈中的不同

for (var i = 0; i < 3; i++) {
  var i = 'aaa';
  console.log(i);
}					//aaa

在當時剛接觸js的時候肯定有遇到過這類例題。之前定的理解是在迴圈之後才進行的i賦值,但是的確還是有點難以接受

for (let i = 0; i < 3; i++) {
  let i = 'aaa';
  console.log(i);
}					//aaaaaaaaa

原因是在處理的時候(let),圓括號內有一個隱藏的作用域,然後在每次遍歷的時候都相當於建立了一個同名變數將之前的變數迭代。看得出es6很大程度上提升了程式碼的嚴謹性
以後會更新例子

相關文章