es6 - 塊級作用域

wuaiqiu 發布于2019-08-26 11:45 / 1543人閱讀

摘要：和塊級作用域在高程中，作者強調說沒有塊級作用域。然而，這種情況在中發生了改變，通過在代碼塊中使用引入了塊級作用域的特性。在塊級作用域內部使用聲明的變量，在塊作用域外部是不可見的。

let const和塊級作用域

在js高程中，作者強調說js沒有塊級作用域。
然而，這種情況在es6中發生了改變，es6通過在代碼塊中使用let, const引入了塊級作用域的特性。
下面是對此特性的介紹。

語法 es5作用域和變量提升

首先，在es5中，只有兩種作用域，函數作用域和全局作用域。所有的變量和函數聲明都存在于這兩種作用域中。

js在執行時，會首先將函數定義和變量聲明提升到作用域的頂部，而初始化的代碼留在原處，這就是變量提升。這是js語言與其他語言不同的地方。

塊級作用域與let const

塊級作用域簡單來說就是使用{}包裹的一段代碼，函數，判斷，循環，甚至多帶帶的一個{}都可以看作一個塊級作用域。

在塊級作用域內部使用let, const聲明的變量，在塊作用域外部是不可見的。

準確的說，使用const聲明的應該是一個常量，它的值是不可變的，應該在聲明時完成初始化。在后面對const聲明的變量賦值會導致錯誤。

在同一個作用域中，使用let或const重復聲明變量是不被允許的。比如：

var count = 30;
let count = 20; //這里無論順序，無論let或const，都會報錯。

//只有這種才不會報錯
var count = 30;
var count = 20; //第二個var被忽略，count等于20

let, const聲明的變量并不會變量提升。另在，在作用域中，使用二者聲明的變量存在一個暫時性死區TDZ，即在聲明語句前對變量的訪問和使用都會引發引用錯誤。比如：

if(condition){
    console.log(typeof value);//會報錯
    let value = "icode007"
}

循環中的塊級綁定

js有一道經典的面試題，即在頁面插入10個a標簽，點擊每個標簽時顯示相應的序號。或者是：

var arr = [];
for(var i =0; i<10; i++){
    arr.push(function(){console.log(i)});
}
arr[5]();

這道題經常用來說明變量的作用域和閉包的相關問題。因為所有的函數引用的都是同一個i，所以都顯示10.
正確的代碼是使用立即執行函數，利用閉包特性：

var arr = [];
for(var i=0; i<10; i++){
    (function(i){
        arr.push(function(){console.log(i);});
    })(i);
}
arr[5]();

通過閉包，每個函數調用的實際上是其獨有的i。

然而，在es6，有個更好的方案，使用let。只需將第一段代碼i聲明中var換成let即可。

在for循環中，每次迭代let都會創建一個新的同名變量，并進行初始化，相當于上面使用立即執行函數的行為。在for-in循環和for-of循環中，同樣如此。

注意事項

const聲明的變量是不可變的，其實質是變量所引用的指針不能發生變化，但由于js動態語言的本質，當const聲明一個對象時，對對象的改變是允許的。比如：

const obj = {name: "icode"};
obj.name ="thoms"; //不會發生錯誤
obj = {name: "thoms"} //發生錯誤

在for-in和for-of迭代中使用const與使用let的行為相同，前提是不再代碼塊中改變它的值，在for循環中，由于i++會改變變量的值，所以會報錯。

在之前全局中使用var定義的變量會成為window對象的一個屬性，而在全局中使用let, const定義的變量不會成為window對象的屬性。

最佳實踐

推薦的最佳實踐是盡量使用let而不是使用var去定義變量，這能讓我們代碼更加的規范。

更加推薦的做法是一般使用const定義變量，只有在預期變量會發生改動時才使用let來定義。因為大部分變量定義后是無需發生變化的。這種方式能減少代碼出錯的幾率。

云服務器 GPU云服務器作用域中作用域作用域規則作用域實例

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

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

ES6學習第一章 let 和 const 命令

摘要：外層作用域不報錯正常輸出塊級作用域與函數聲明規定，函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明。規定，塊級作用域之中，函數聲明語句的行為類似于，在塊級作用域之外不可引用。同時，函數聲明還會提升到所在的塊級作用域的頭部。前言：最近開始看阮一峰老師的《ECMAScript 6 入門》(以下簡稱原...

番茄西紅柿 2021-11-24 09:39 評論0 收藏2637
ES6學習摘要（01）（新人學習）

摘要：入門一前言由于最近本人在學習，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于的新人學習摘要吧。的作用域與命令相同只在聲明所在的塊級作用域內有效。塊級作用域新增方式和實際上為新增了塊級作用域。同時，函數聲明還會提升到所在的塊級作用域的頭部。 ECMAScript6/ES6 入門一、前言由于最近本人在學習ES6，做一些筆記能夠更好的熟悉，就趁此機會來寫一篇關于ES6的新人學習摘要吧。...

dmlllll 2019-08-21 17:59 評論0 收藏0
es6學習之let和const命令

摘要：和命令命令是在它所在的代碼塊有效，它屬于塊級作用域，新增。只有全局作用域和函數作用域。 let和const命令 let命令是在它所在的代碼塊有效，它屬于塊級作用域，es6新增。es5只有全局作用域和函數作用域。let命令存在暫時性死區（TDZ），即在申明前使用就會報錯,不存在變量提升 console.log(a); // 報錯 let a = 111; ==let不允許在相同作用域中，...

DrizzleX 2019-08-23 16:49 評論0 收藏0
ES5和ES6作用域詳解

摘要：允許在塊級作用域內聲明函數。上面代碼中，存在全局變量，但是塊級作用域內又聲明了一個局部變量，導致后者綁定這個塊級作用域，所以在聲明變量前，對賦值會報錯。 ES5的作用域變量起作用的范圍，js中能創建作用域的只能是函數 { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

Dr_Noooo 2019-08-21 17:30 評論0 收藏0
ES6精解：let、const、塊級作用域

摘要：命令新增了命令，跟類似，都是用來聲明變量的不允許重復聲明報錯不存在變量提升報錯正確寫法為既要先定義，后面才能有這個值，否則會報錯，如果改成會提示未定義，但是就直接報錯了暫時性死區只要在塊級作用域里面存在則它所聲明的變量就綁定在這個塊級作用域 let命令 ES6新增了let命令，跟var類似，都是用來聲明變量的 1.不允許重復聲明 { let a = 1; let a =...

BWrong 2019-08-22 18:20 評論0 收藏0