這篇文章給大家分享的是有關(guān)ES6中塊級作用域的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司專注骨干網(wǎng)絡(luò)服務(wù)器租用十余年，服務(wù)更有保障！服務(wù)器租用，大邑服務(wù)器托管 成都服務(wù)器租用，成都服務(wù)器托管，骨干網(wǎng)絡(luò)帶寬，享受低延遲，高速訪問。靈活、實現(xiàn)低成本的共享或公網(wǎng)數(shù)據(jù)中心高速帶寬的專屬高性能服務(wù)器。

var

var聲明之函數(shù)作用域和全局作用域。

來段代碼體會一下：

function getName() {
 if (1 + 1 === 2) {
 var name = 'xixi';
 }

 console.log(name);
}

getName();//xixi

在c或java語言中name本應(yīng)該只在if塊中使用的，但是在if的外面也可以訪問到，這個就是 js沒有塊級作用域的一種體現(xiàn)。這個弊端在for循環(huán)中體現(xiàn)的十分明顯：

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

console.log(i);// 10

var i的本意是聲明個臨時變量i，用來遍歷數(shù)組等，本不應(yīng)該在for循環(huán)的外部訪問到，但現(xiàn)在卻可以被訪問到你說鬧不鬧心？好一點的程序員會用立即執(zhí)行函數(shù)來模擬塊級作用域，原來的我會注意一下盡量不使用相同的變量名?。

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

console.log(i);// undefined

以上：大家知道了 js 沒有塊級作用域。

變量可以重復(fù)聲明

var name = 'xixi';
console.log(name);// xixi
var name= '一步';
console.log(name);// 一步

不報錯，困惑不困惑，這個就是變量可以重復(fù)聲明。

變量提升

function getName() {
 console.log(name);
 var name = 'xixi';
 // ...
}

getName();// undefined

console.log打印name為undefined。為啥不報錯呢，對于一直使用js語言的人來說這個現(xiàn)象還好理解，如果是后臺轉(zhuǎn)前端的人來說估計得罵人了。這就是所謂的變量提升。簡單的向大家解釋一下吧。

var name = 'xixi';

這是一條被我們寫爛了的語句，包含兩個過程：var name; name = 'xixi';分別為變量聲明和變量初始化。

變量提升： 無論變量聲明var name;處于什么位置，都會被提到作用域的頂部進行。

let

ES6為讓變量生命周期更加可控，引入兩個非常好的特性let、const。塊級作用域、不能重復(fù)聲明、臨時性死區(qū)等特性用來解決 var 變量存在的種種問題。

塊級作用域

function getName4ES6() {
 if (1 + 1 === 2) {
 let name = 'xixi';
 }

 console.log(name);
}

getName4ES6(); // undefined

終于在{}外面訪問不到name了。for循環(huán)也變的簡單了，大家試一下將for循環(huán)的var換成 let.

同一塊級作用域內(nèi)不能重復(fù)聲明變量

function redefineValue() {
 let name = 'xixi';
 let name = '一步';
}

redefineValue();// Uncaught SyntaxError: Identifier 'name' has already been declared

重復(fù)聲明會報錯

{
 let name = 'xixi';
 console.log(name);// xixi
 {
 let name = 'yibu';
 console.log(name); // yibu
 }
}

注意： 在 ES6中，{}就是一個塊級作用域。

臨時性死區(qū)

function getName4ES6() {
 console.log(name);
 for (let i = 0; i < 10; i ++) {

 }
 let name = 'xixi';
 // ...
}

 
getName4ES6();// Uncaught ReferenceError: name is not defined

在上文ES5中，name還會存在變量提升，值為undefined。ES6中又報錯了。怎么解釋呢？。。。。這個就是臨時性死區(qū)的概念，在作用域塊中不可以在變量聲明前就使用變量，若使用是會出錯的。

javascript引擎在發(fā)現(xiàn)變量聲明時，要么將變量聲明提升到作用域的頂部(var聲明變量時)，要么將變量放在臨時性死區(qū)中(let、const聲明變量時)，訪問臨時性死區(qū)中的變量會觸發(fā)運行時錯誤。

const

const和let同樣具有塊級作用域，不能重復(fù)聲明，臨時性死區(qū)的概念。它還具有兩個特有的特性：聲明的同時必須初始化、變量引用不可以改變。

聲明的同時必須初始化

const name;//Uncaught SyntaxError: Missing initializer in const declaration

不賦值，就報錯。這個也很好理解const的本意就是用來定義常量，不可變的值。若不在聲明時給出初始值以后就再也沒有機會了。

值不可變

const name = 'x9x9'；
name = 'yyy';// Uncaught SyntaxError: Invalid or unexpected token

那么對象會怎樣呢？

const person = {
 name: 'lala',
 age: 40
};

person = {};// VM1042:6 Uncaught TypeError: Assignment to constant variable. at <anonymous>:6:8

引用是不可變的，那我們在看看對象的屬性值是什么情況吧~

person.name = 'yoyo';
console.log(person);// {name: "yoyo", age: 40}

沒有報錯，對象引用不可改變，對象屬性可以變更。

let vs const

大家可能會困惑，什么時候使用let，什么時候使用const。let能做的const好像都可以。網(wǎng)上有一種流行做法：能用const就絕不用let，簡單粗暴，不過很好用。

個人看法：若變量在后續(xù)方法中會被改變，就使用let。一些常量聲明使用const, const聲明的變量名全部大寫。代碼中的變量，如果是let聲明的就代表其可變，若是const聲明的，不論是簡單數(shù)據(jù)類型還是引用類型變量就都不要改變它的值。這樣，程序會更加的健壯，大家合作起來也比較方便。

感謝各位的閱讀！關(guān)于“ES6中塊級作用域的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：ES6中塊級作用域的示例分析-創(chuàng)新互聯(lián)
URL網(wǎng)址：http://m.rwnh.cn/article12/giodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、關(guān)鍵詞優(yōu)化、ChatGPT、全網(wǎng)營銷推廣、微信公眾號、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)