摘要:盡管如此,由于塊作用域的緣故,這段代碼還是能夠安全地運(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