ES6中塊級(jí)作用域的示例分析

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

var

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

來段代碼體會(huì)一下：

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

 console.log(name);
}

getName();//xixi

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

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

console.log(i);// 10

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

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

console.log(i);// undefined

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

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

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

不報(bào)錯(cuò)，困惑不困惑，這個(gè)就是變量可以重復(fù)聲明。

變量提升

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

getName();// undefined

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

var name = 'xixi';

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

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

let

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

塊級(jí)作用域

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

 console.log(name);
}

getName4ES6(); // undefined

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

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

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

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

重復(fù)聲明會(huì)報(bào)錯(cuò)

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

注意： 在 ES6中，{}就是一個(gè)塊級(jí)作用域。

臨時(shí)性死區(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還會(huì)存在變量提升，值為undefined。ES6中又報(bào)錯(cuò)了。怎么解釋呢？。。。。這個(gè)就是臨時(shí)性死區(qū)的概念，在作用域塊中不可以在變量聲明前就使用變量，若使用是會(huì)出錯(cuò)的。

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

const

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

聲明的同時(shí)必須初始化

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

不賦值，就報(bào)錯(cuò)。這個(gè)也很好理解const的本意就是用來定義常量，不可變的值。若不在聲明時(shí)給出初始值以后就再也沒有機(jī)會(huì)了。

值不可變

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

那么對(duì)象會(huì)怎樣呢？

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

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

引用是不可變的，那我們?cè)诳纯磳?duì)象的屬性值是什么情況吧~

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

沒有報(bào)錯(cuò)，對(duì)象引用不可改變，對(duì)象屬性可以變更。

let vs const

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

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

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