資訊專欄INFORMATION COLUMN
摘要：盡管如此，由于塊作用域的緣故，這段代碼還是能夠安全地運(yùn)行。塊作用域的顯式聲明如何避免上述問題呢答案是利用額外的一對(duì)大括號(hào)來做塊作用域的顯式聲明。
ES2015已經(jīng)定稿一年多了，想必大家早就用上let和const來充分利用塊作用域的優(yōu)勢(shì)了吧？那么，你們知道塊作用域都是怎么聲明的嗎？
在各種教程資料的例子里，塊作用域都是出現(xiàn)在for(……){……}/if(……){……}/while(……){……}這些語句里的，那你有沒有想過，塊作用域其實(shí)跟這些邏輯控制語句完全沒有關(guān)系？
前置知識(shí)本文需要有塊作用域以及let / const相關(guān)知識(shí)，如有欠缺，請(qǐng)看這里。
塊作用域的標(biāo)識(shí)塊作用域的標(biāo)識(shí)其實(shí)是那一對(duì)大括號(hào){}，換句話說，我們不需要任何邏輯控制語句就可以直接使用大括號(hào)來創(chuàng)建塊作用域：
var a = 2;
{
let a = 3;
}
console.log(a); // 輸出2
塊作用域的隱式聲明
相信大家一般都不會(huì)直接用大括號(hào)來創(chuàng)建塊作用域，而是像下面這個(gè)例子來使用：
var a = 2;
var b = 2;
var c = 0;
if (a === b) {
let c = 2;
a ++;
b -= c;
}
console.log(a); // 3
console.log(b); // 0
你可能注意到，這段代碼里定義了兩個(gè)變量c，這有時(shí)并不是故意重復(fù)起名為c，而是前面一大堆代碼，根本不知道變量名c已經(jīng)被用掉了。盡管如此，由于塊作用域的緣故，這段代碼還是能夠安全地運(yùn)行。
但如果這段代碼由別人接手，而他又急于改需求呢，那很可能就會(huì)出現(xiàn)以下這種情況：
var a = 2;
var b = 2;
var c = 0;
if (a === b) {
let c = 2;
a ++;
}
b -= c;
console.log(a); // 3
console.log(b); // 2
需求是這樣改的：不需要判斷a === b就執(zhí)行b -= c;了。此時(shí)，這段代碼在運(yùn)行時(shí)也不會(huì)報(bào)錯(cuò)（因?yàn)榍懊嬖缫讯x有了一個(gè)同名變量c），但結(jié)果卻出錯(cuò)了，而且往往這種錯(cuò)誤還不容易發(fā)現(xiàn)。
塊作用域的顯式聲明如何避免上述問題呢？答案是：利用額外的一對(duì)大括號(hào)來做塊作用域的顯式聲明。
我們?cè)囍?strong>塊作用域的顯式聲明來修改上述代碼：
var a = 2;
var b = 2;
var c = 0;
if (a === b) {
{ // 使用大括號(hào)來包裹住塊作用域變量相關(guān)的代碼塊
let c = 2;
b -= c;
}
a ++; // 操作的都是塊作用域外部就定義好的變量，剔除在大括號(hào)以外
}
console.log(a); // 3
console.log(b); // 0
看著有點(diǎn)別扭是吧？沒關(guān)系，我們看看按需求修改后的代碼：
var a = 2;
var b = 2;
var c = 0;
if (a === b) {
a ++;
}
{
let c = 2;
b -= c;
}
console.log(a); // 3
console.log(b); // 0
duang!
爸爸媽媽再也不用擔(dān)心我重構(gòu)代碼的時(shí)候出一大堆bug了！
總結(jié)塊作用域的顯式聲明實(shí)際上是主動(dòng)分隔開接受塊作用域管理的let / const變量和不接受塊作用域管理的var變量，從而幫助我們?cè)谥貥?gòu)代碼時(shí)，能更輕松、更放心地挪動(dòng)代碼。
本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007639527
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/91171.html
摘要：提供了同時(shí)解決這兩個(gè)問題的方案以上這種模式稱為立即執(zhí)行函數(shù)表達(dá)式。塊作用域不應(yīng)該完全作為函數(shù)作用域的替代方案，兩種功能應(yīng)該同時(shí)存在。 函數(shù)作用域 為了隱藏內(nèi)部實(shí)現(xiàn)，可以通過在任意代碼片段外部添加包裝函數(shù)，但是這并不理想，因?yàn)楸仨毬暶饕粋€(gè)具名函數(shù)，意味著這個(gè)函數(shù)名稱本身會(huì)污染函數(shù)所在的作用域；同時(shí)必須通過顯式地調(diào)用函數(shù)才能運(yùn)行其中的代碼。 *：區(qū)分函數(shù)聲明和表達(dá)式最簡(jiǎn)單的方法是看func...
摘要：塊級(jí)作用域中的塊級(jí)作用域很有可能導(dǎo)致局部變量覆蓋全局變量或者局部變量泄露成全局變量。也就是局部變量與全局變量不會(huì)打架塊級(jí)作用域的出現(xiàn)，實(shí)際上使得獲得廣泛應(yīng)用的立即執(zhí)行匿名函數(shù)不再必要了。 let 和 const命令 1.let 命令 基本用法 語法類似 var，但是所聲明的變量，只在 let 命令所在的代碼塊內(nèi)有效。 在 for 循環(huán)中，就非常適合使用 let 聲明變量。 var a...
摘要：大家好，我從今天開始就會(huì)正式講的語法方面。變量中的變量一般使用來聲明的不在本教程討論范圍內(nèi)，可以用來定義任何種類的變量，如果只對(duì)變量進(jìn)行了定義而沒有賦值，這樣變量會(huì)默認(rèn)為。 大家好，我從今天開始就會(huì)正式講javascript的語法方面。變量 js中的變量一般使用var來聲明（es6的let不在本教程討論范圍內(nèi)），可以用來定義任何種類的變量，如果只對(duì)變量進(jìn)行了定義而沒有賦值，這樣變量會(huì)默...
摘要：大家好，我從今天開始就會(huì)正式講的語法方面。變量中的變量一般使用來聲明的不在本教程討論范圍內(nèi)，可以用來定義任何種類的變量，如果只對(duì)變量進(jìn)行了定義而沒有賦值，這樣變量會(huì)默認(rèn)為。 大家好，我從今天開始就會(huì)正式講javascript的語法方面。變量 js中的變量一般使用var來聲明（es6的let不在本教程討論范圍內(nèi)），可以用來定義任何種類的變量，如果只對(duì)變量進(jìn)行了定義而沒有賦值，這樣變量會(huì)默...
摘要：全局作用域在任何函數(shù)塊或模塊范圍之外定義的變量具有全局作用域。的局部函數(shù)作用域是函數(shù)的詞法作用域。作用域鏈每個(gè)作用域都有一個(gè)指向父作用域的鏈接。當(dāng)使用變量時(shí)，會(huì)向下查看作用域鏈，直到它找到所請(qǐng)求的變量或者到達(dá)全局作用域即作用域鏈的末尾。 一網(wǎng)打盡 JavaScript 的作用域 翻譯：瘋狂的技術(shù)宅https://medium.freecodecamp.o...??-javascript...
閱讀 1432·2021-11-25 09:43
閱讀 2029·2021-07-26 23:38
閱讀 741·2019-08-30 15:53
閱讀 2281·2019-08-30 15:43
閱讀 1169·2019-08-29 18:40
閱讀 1970·2019-08-26 13:28
閱讀 1975·2019-08-23 18:20
閱讀 544·2019-08-23 15:07
