淺析Javascript的自動(dòng)分號(hào)插入(ASI)機(jī)制
前言
相信從事過(guò)C#和Java的大家都知道分號(hào)是用作斷句(EOS,end of statement)的,而且必須加分號(hào),否則編譯就不通過(guò)了。但JavaScript由于存在ASI機(jī)制,因此允許我們省略分號(hào)。ASI機(jī)制不是說(shuō)在解析過(guò)程中解析器自動(dòng)把分號(hào)添加到代碼中,而是說(shuō)解析器除了分號(hào)還會(huì)以換行為基礎(chǔ)按一定的規(guī)則作為斷句的依據(jù),從而保證解析的正確性。
規(guī)范理論
es5 標(biāo)準(zhǔn)定義了自動(dòng)分號(hào)插入規(guī)則,包括以下三個(gè)基本規(guī)則加兩個(gè)前置條件:
前置條件
1、如果插入分號(hào)后解析結(jié)果是空語(yǔ)句,那么不會(huì)自動(dòng)插入分號(hào)。
例子:(空語(yǔ)句,else 前不加分好)
if (a > b) else c = d
2、如果插入分號(hào)后它成為 for 語(yǔ)句頭部的兩個(gè)分號(hào)之一,那么不會(huì)自動(dòng)插入分號(hào)。
例子:(不會(huì)加分號(hào))
for (a; b )
基本規(guī)則
左到右解析程序,當(dāng)遇到一個(gè)不符合任何文法產(chǎn)生式的 token(叫做 違規(guī) token(offending token)),那么只要滿足下面條件之一就在違規(guī) token 前面自動(dòng)插入分號(hào)。
1、至少一個(gè) LineTerminator 分割了違規(guī) token 和前一個(gè) token。
2、違規(guī) token 是 }。
例子:(1、2不符合任何產(chǎn)生式,并且之間存在 LineTerminator,因此在違規(guī) token 2前加了分好,2和}則是因?yàn)檫`規(guī) token 是 }所以加了分號(hào))
{ 1
2 } 3
{ 1
;2 ;} 3;
左到右解析程序,tokens 輸入流已經(jīng)結(jié)束,當(dāng)解析器無(wú)法將輸入 token 流解析成單個(gè)完整 ECMAScript 程序 ,那么就在輸入流的結(jié)束位置自動(dòng)插入分號(hào)。
對(duì)于受限產(chǎn)生式,也就是下面的5個(gè),我們把產(chǎn)生式 [no LineTerminator here]后面的 token 叫做受限 token,如果在 token 和 受限 token 間存在了至少一個(gè) LineTerminator,那么會(huì)在受限 token 前自動(dòng)加上 token。
受限的產(chǎn)生式只限如下5個(gè):
PostfixExpression :
LeftHandSideExpression [no LineTerminator here] ++ LeftHandSideExpression [no LineTerminator here] --
ContinueStatement :
continue [no LineTerminator here] Identifier;
BreakStatement :
break [no LineTerminator here] Identifier;
ReturnStatement :
return [no LineTerminator here] Expression;
ThrowStatement : throw [no LineTerminator here] Expression;
歸納
避免 ASI 帶來(lái)的問(wèn)題
1、后綴運(yùn)算符 ++ 或 -- 和它的操作數(shù)應(yīng)該出現(xiàn)在同一行。
2、return 或 throw 語(yǔ)句的表達(dá)式開(kāi)始位置應(yīng)該和 return 或 throw token 同一行。
3、break 或 continue 語(yǔ)句的標(biāo)示符應(yīng)該和 break 或 continue token 同一行。
何時(shí)加分號(hào)
無(wú)分號(hào)黨(懶人黨)想要不加分號(hào),那么就需要知道什么時(shí)候應(yīng)該要加分號(hào)。網(wǎng)上的一篇文章歸納了 NO ASI 并且會(huì)出現(xiàn)錯(cuò)誤的幾種情況,在這幾種情況下我們是要加分號(hào)的。下面是對(duì)應(yīng)的描述:
在以 ([/+- 開(kāi)頭的語(yǔ)句前加分號(hào)(由于正常寫法均不會(huì)出現(xiàn)以 .,*% 作為語(yǔ)句開(kāi)頭,因此只需記住前面5個(gè)即可,你看能懶則懶哦)
不過(guò)這里只考慮了換行的情況,其實(shí) ASI 還存在不換行的情況,這就要根據(jù)標(biāo)準(zhǔn)里的三條規(guī)則行事了!
知道了這點(diǎn),其實(shí)我們就可以省略大部分的分號(hào)了。但是也不強(qiáng)求,因?yàn)檫@還是要根據(jù)個(gè)人習(xí)慣以及團(tuán)隊(duì)風(fēng)格走的。
小補(bǔ)充
為什么自執(zhí)行函數(shù)前要加分號(hào)?
主要是應(yīng)對(duì)代碼合并壓縮時(shí),由于缺少分號(hào);帶來(lái)的錯(cuò)誤。知道了上面的規(guī)則,在 ( 開(kāi)頭的行前加分號(hào)就可以避免錯(cuò)誤了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
- JS正則驗(yàn)證多個(gè)郵箱完整實(shí)例【郵箱用分號(hào)隔開(kāi)】
- 淺談javascript的分號(hào)的使用
- JavaScript 自動(dòng)分號(hào)插入(JavaScript synat:auto semicolon insertion)
- 關(guān)于JavaScript語(yǔ)句后面的分號(hào)問(wèn)題
- JS 分號(hào)引起的一段調(diào)試問(wèn)題
- js中關(guān)于一個(gè)分號(hào)的崩潰示例
- javascript 分號(hào)總結(jié)及詳細(xì)介紹
- 如何防止JavaScript自動(dòng)插入分號(hào)
- JavaScript中的分號(hào)插入機(jī)制詳細(xì)介紹
- JavaScript中分號(hào)的一些細(xì)節(jié)
相關(guān)文章
微信公眾號(hào)網(wǎng)頁(yè)授權(quán)登錄的超簡(jiǎn)單實(shí)現(xiàn)步驟
微信開(kāi)放平臺(tái)為第三方移動(dòng)程序提供分享、傳播的接口,使用戶可將第三方程序的內(nèi)容發(fā)布給好友或分享至朋友圈,下面這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)網(wǎng)頁(yè)授權(quán)登錄的超簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2022-06-06
詳解組件庫(kù)的webpack構(gòu)建速度優(yōu)化
這篇文章主要介紹了詳解組件庫(kù)的webpack構(gòu)建速度優(yōu)化,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
cookie在javascript中的使用技巧以及隱私在服務(wù)器端的設(shè)置
cookie在javascript中的使用技巧,需要的朋友可以參考下2012-12-12
JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)易的圖片拖拽排序?qū)嵗a,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06

