ES6學(xué)習(xí)教程之塊級(jí)作用域詳解

前言

眾所周知ES5之前javascript語(yǔ)言只有函數(shù)作用域和全局作用域，使用var來(lái)聲明變量，var聲明的變量還存在變量提升使人困惑不已。我們先來(lái)復(fù)習(xí)一下ES5的var聲明，再對(duì)比學(xué)習(xí)let和const 。

var

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

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

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

 console.log(name);
}

getName();//xixi

在c或java語(yǔ)言中name本應(yīng)該只在if塊中使用的，但是在if的外面也可以訪問(wèn)到，這個(gè)就是 js沒(méi)有塊級(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，用來(lái)遍歷數(shù)組等，本不應(yīng)該在for循環(huán)的外部訪問(wèn)到，但現(xiàn)在卻可以被訪問(wèn)到你說(shuō)鬧不鬧心？好一點(diǎn)的程序員會(huì)用立即執(zhí)行函數(shù)來(lái)模擬塊級(jí)作用域，原來(lái)的我會(huì)注意一下盡量不使用相同的變量名😎。

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

console.log(i);// undefined

以上：大家知道了 js 沒(méi)有塊級(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語(yǔ)言的人來(lái)說(shuō)這個(gè)現(xiàn)象還好理解，如果是后臺(tái)轉(zhuǎn)前端的人來(lái)說(shuō)估計(jì)得罵人了。這就是所謂的變量提升。簡(jiǎn)單的向大家解釋一下吧。

var name = 'xixi';

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

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

let

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

塊級(jí)作用域

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

 console.log(name);
}

getName4ES6(); // undefined

終于在{}外面訪問(wèn)不到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í))，訪問(wèn)臨時(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的本意就是用來(lái)定義常量，不可變的值。若不在聲明時(shí)給出初始值以后就再也沒(méi)有機(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}

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

let vs const

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

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

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com