淺析Javascript的自動分號插入(ASI)機(jī)制
前言
相信從事過C#和Java的大家都知道分號是用作斷句(EOS,end of statement)的,而且必須加分號,否則編譯就不通過了。但JavaScript由于存在ASI機(jī)制,因此允許我們省略分號。ASI機(jī)制不是說在解析過程中解析器自動把分號添加到代碼中,而是說解析器除了分號還會以換行為基礎(chǔ)按一定的規(guī)則作為斷句的依據(jù),從而保證解析的正確性。
規(guī)范理論
es5 標(biāo)準(zhǔn)定義了自動分號插入規(guī)則,包括以下三個基本規(guī)則加兩個前置條件:
前置條件
1、如果插入分號后解析結(jié)果是空語句,那么不會自動插入分號。
例子:(空語句,else
前不加分好)
if (a > b) else c = d
2、如果插入分號后它成為 for
語句頭部的兩個分號之一,那么不會自動插入分號。
例子:(不會加分號)
for (a; b )
基本規(guī)則
左到右解析程序,當(dāng)遇到一個不符合任何文法產(chǎn)生式的 token
(叫做 違規(guī) token(offending token)),那么只要滿足下面條件之一就在違規(guī) token
前面自動插入分號。
1、至少一個 LineTerminator 分割了違規(guī) token
和前一個 token
。
2、違規(guī) token
是 }。
例子:(1、2不符合任何產(chǎn)生式,并且之間存在 LineTerminator,因此在違規(guī) token 2前加了分好,2和}則是因為違規(guī) token
是 }所以加了分號)
{ 1 2 } 3
{ 1 ;2 ;} 3;
左到右解析程序,tokens
輸入流已經(jīng)結(jié)束,當(dāng)解析器無法將輸入 token
流解析成單個完整 ECMAScript 程序 ,那么就在輸入流的結(jié)束位置自動插入分號。
對于受限產(chǎn)生式,也就是下面的5個,我們把產(chǎn)生式 [no LineTerminator here]后面的 token
叫做受限 token
,如果在 token
和 受限 token
間存在了至少一個 LineTerminator,那么會在受限 token
前自動加上 token
。
受限的產(chǎn)生式只限如下5個:
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 帶來的問題
1、后綴運(yùn)算符 ++ 或 -- 和它的操作數(shù)應(yīng)該出現(xiàn)在同一行。
2、return
或 throw
語句的表達(dá)式開始位置應(yīng)該和 return
或 throw token
同一行。
3、break
或 continue 語句的標(biāo)示符應(yīng)該和 break
或 continue token
同一行。
何時加分號
無分號黨(懶人黨)想要不加分號,那么就需要知道什么時候應(yīng)該要加分號。網(wǎng)上的一篇文章歸納了 NO ASI 并且會出現(xiàn)錯誤的幾種情況,在這幾種情況下我們是要加分號的。下面是對應(yīng)的描述:
在以 ([/+- 開頭的語句前加分號(由于正常寫法均不會出現(xiàn)以 .,*% 作為語句開頭,因此只需記住前面5個即可,你看能懶則懶哦)
不過這里只考慮了換行的情況,其實 ASI 還存在不換行的情況,這就要根據(jù)標(biāo)準(zhǔn)里的三條規(guī)則行事了!
知道了這點(diǎn),其實我們就可以省略大部分的分號了。但是也不強(qiáng)求,因為這還是要根據(jù)個人習(xí)慣以及團(tuán)隊風(fēng)格走的。
小補(bǔ)充
為什么自執(zhí)行函數(shù)前要加分號?
主要是應(yīng)對代碼合并壓縮時,由于缺少分號;帶來的錯誤。知道了上面的規(guī)則,在 ( 開頭的行前加分號就可以避免錯誤了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
js中異步函數(shù)async function變同步函數(shù)的簡單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡單入門,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04詳解JavaScript如何實現(xiàn)更短時間的延時函數(shù)
在項目開發(fā)中,經(jīng)常能遇到需要延時執(zhí)行的需求,比如實現(xiàn)一個定時器功能,本文主要和大家介紹了JS如何實現(xiàn)更短時間的延時函數(shù),需要的可以參考下2024-03-03layer設(shè)置maxWidth及maxHeight解決方案
這篇文章主要介紹了layer設(shè)置maxWidth及maxHeight解決方案,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能示例【附源碼下載】
這篇文章主要介紹了js實現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能,結(jié)合完整實例形式分析了javascript動態(tài)操作頁面元素實現(xiàn)解鎖效果的相關(guān)實現(xiàn)技巧,并附帶供讀者源碼下載參考,需要的朋友可以參考下2019-06-06JS常用正則表達(dá)式總結(jié)【經(jīng)典】
這篇文章主要介紹了JS常用正則表達(dá)式,總結(jié)分析了常見的數(shù)字、字符、郵箱、身份證、電話等的正則驗證技巧,需要的朋友可以參考下2017-05-05javascript實現(xiàn)鼠標(biāo)拖尾特效
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)鼠標(biāo)拖尾特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09