小白學《深入理解es6》--塊級作用域綁定

fox_soyoung 發布于2019-08-20 18:04 / 1870人閱讀

摘要：塊級聲明前是沒有塊級作用域的，比如外可以訪問內部的變量。循環中的塊作用域綁定我們經常使用循環發現了什么在循環執行后，我們仍然可以訪問到變量。

var聲明及變量提升機制

在ES6之前，在函數作用域中或者全局作用域中通過var關鍵字來聲明變量，無論是在代碼的哪個位置，這條聲明語句都會提到最頂部來執行，這就是變量聲明提升。

注意：只是聲明提升，初始化并沒有提升。

看一個例子：

function getStudent(name){
  if(name){
    var age=25;
  }else{
    console.log("name不存在");      
  }
  console.log(age); //undefined
}

如果按照預想的代碼的執行順序，當name有值時才會創建變量age，可是執行代碼發現，即使不傳入name，判斷語句外的輸出語句并沒有報錯，而是輸出undefined。

這就是變量聲明提升。

塊級聲明

ES6前是沒有塊級作用域的，比如{}外可以訪問內部的變量。

let聲明

聲明變量

作用域限制在當前代碼塊

聲明不會提升

禁止重聲明（同一作用域不行，可以覆蓋外部同名變量）

function getStudent(name){
  if(name){
    let age=25;
    console.log(age); //25
  }else{
    console.log("name不存在");      
  }
  console.log(age); //age is not defined
}

和上文一樣的代碼，只是將age的命名關鍵字從var改成了let，在執行getStudent()和getStudent("axuebin")時都會報錯。

原因：

在if語句內部執行之后，age變量將立即被銷毀

如果name為空，則永遠都不會創建age變量

const聲明

聲明常量

必須初始化

不可更改

作用域限制在當前代碼塊

聲明不會提升

禁止重聲明（同一作用域不行，可以覆蓋外部同名變量）

如果用const來聲明對象，則對象中的值可以修改。

臨時死區（Temporal Dead Zone）

JavaScript引擎在掃面代碼發現聲明變量時，遇到var則提升到作用域頂部，遇到let和const則放到TDZ中。當執行了變量聲明語句后，TDZ中的變量才能正常訪問。

循環中的塊作用域綁定

我們經常使用for循環：

for(var i=0;i<10;i++){
  console.log(i); //0,1,2,3,4,5,6,7,8,9
}
console.log(i) //10

發現了什么？

在for循環執行后，我們仍然可以訪問到變量i。

So easy ~ 把var換成let就解決了~

for(let i=0;i<10;i++){
  console.log(i); //0,1,2,3,4,5,6,7,8,9
}
console.log(i) //i is not defined

還記得當初講閉包時setTimeout循環各一秒輸出i的那個例子嗎~

曾經熟悉的你 ~

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

很顯然，上面的代碼輸出了10次的10，setTimeout在執行了循環之后才執行，此時i已經是10了~

之前，我們這樣做 ~

for(var i=0;i<10;i++){
  setTimeout((function(i){
    console.log(i); //0,1,2,3,4,5,6,7,8,9
  })(i),1000)
}

現在，我們這樣做 ~ 來看看把var改成let會怎樣~

for(let i=0;i<10;i++){
  setTimeout(function(){
    console.log(i); //0,1,2,3,4,5,6,7,8,9
  },1000)
}

nice~

全局塊作用域綁定

在全局作用域下聲明的時

var會覆蓋window對象中的屬性

let和const會屏蔽，而不是覆蓋，用window.還能訪問到

歡迎來小白這逛逛~ 原文鏈接

GPU云服務器云服務器深入理解系列深入理解linux 深入理解webrtc 深入理解python

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84050.html

ES6學習之 -- let和const命令

摘要：命令用來聲明變量，它的用法類似，但是命令聲明的變量只在所在的代碼塊中有效。不允許重復聲明不允許在同一作用域聲明兩個相同的變量。對于內部的數據結構的變化是無法控制的。 let命令用來聲明變量，它的用法類似var，但是let命令聲明的變量只在所在的代碼塊中有效。 { var a = 1; let b = 2; } console.log(a); // 1 con...

marser 2019-08-21 18:33 評論0 收藏0
深入理解ES6 (一) 塊級綁定

摘要：聲明聲明的語法與的語法一致。總結文章都是以深入理解讀書筆記形式，大部分引用書中的定義，加上作者的理解，樣例也做了調整，所有樣例都可以放到里運行親自嘗試。 1.變量提升使用 var 關鍵字聲明的變量，無論其實際聲明位置在何處，都會被視為聲明于所在函數的頂部（如果聲明不在任意函數內，則視為在全局作用域的頂部）。這句話從字面上不難理解。但是他是怎樣一個過程，為什么會這樣。當你代...

KunMinX 2019-08-26 10:27 評論0 收藏0
深入理解ES6筆記（一）塊級作用域綁定

摘要：和都能夠聲明塊級作用域，用法和是類似的，的特點是不會變量提升，而是被鎖在當前塊中。聲明常量，一旦聲明，不可更改，而且常量必須初始化賦值。臨時死區臨時死區的意思是在當前作用域的塊內，在聲明變量前的區域叫做臨時死區。主要知識點有：var變量提升、let聲明、const聲明、let和const的比較、塊級綁定的應用場景showImg(https://segmentfault.com/img...

馬忠志 2019-08-23 10:58 評論0 收藏0
深入理解ES6之《塊級作用域綁定》

摘要：眾所周知，中的聲明存在變量提升機制，因此引用了塊級作用域來強化對變量生命周期的控制聲明不會被提升，有幾個需要注意的點不能被重復聲明假設作用域中已經存在某個標識符無論該標識符是通過聲明還是變量聲明，此時再使用或關鍵定聲明會拋錯此處則會拋出錯誤眾所周知，js中的var聲明存在變量提升機制，因此ESMAScript 6引用了塊級作用域來強化對變量生命周期的控制let const 聲明不會被...

Nosee 2019-08-21 12:02 評論0 收藏0