淺析Javascript的自動(dòng)分號(hào)插入(ASI)機(jī)制
前言
相信從事過C#和Java的大家都知道分號(hào)是用作斷句(EOS,end of statement)的,而且必須加分號(hào),否則編譯就不通過了。但JavaScript由于存在ASI機(jī)制,因此允許我們省略分號(hào)。ASI機(jī)制不是說在解析過程中解析器自動(dòng)把分號(hào)添加到代碼中,而是說解析器除了分號(hào)還會(huì)以換行為基礎(chǔ)按一定的規(guī)則作為斷句的依據(jù),從而保證解析的正確性。
規(guī)范理論
es5 標(biāo)準(zhǔn)定義了自動(dòng)分號(hào)插入規(guī)則,包括以下三個(gè)基本規(guī)則加兩個(gè)前置條件:
前置條件
1、如果插入分號(hào)后解析結(jié)果是空語句,那么不會(huì)自動(dòng)插入分號(hào)。
例子:(空語句,else 前不加分好)
if (a > b) else c = d
2、如果插入分號(hào)后它成為 for 語句頭部的兩個(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)解析器無法將輸入 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 帶來的問題
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 同一行。
何時(shí)加分號(hào)
無分號(hào)黨(懶人黨)想要不加分號(hào),那么就需要知道什么時(shí)候應(yīng)該要加分號(hào)。網(wǎng)上的一篇文章歸納了 NO ASI 并且會(huì)出現(xiàn)錯(cuò)誤的幾種情況,在這幾種情況下我們是要加分號(hào)的。下面是對(duì)應(yīng)的描述:
在以 ([/+- 開頭的語句前加分號(hào)(由于正常寫法均不會(huì)出現(xiàn)以 .,*% 作為語句開頭,因此只需記住前面5個(gè)即可,你看能懶則懶哦)
不過這里只考慮了換行的情況,其實(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);帶來的錯(cuò)誤。知道了上面的規(guī)則,在 ( 開頭的行前加分號(hào)就可以避免錯(cuò)誤了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- JS正則驗(yàn)證多個(gè)郵箱完整實(shí)例【郵箱用分號(hào)隔開】
- 淺談javascript的分號(hào)的使用
- JavaScript 自動(dòng)分號(hào)插入(JavaScript synat:auto semicolon insertion)
- 關(guān)于JavaScript語句后面的分號(hào)問題
- JS 分號(hào)引起的一段調(diào)試問題
- 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)文章
js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門
這篇文章主要介紹了js中異步函數(shù)async function變同步函數(shù)的簡(jiǎn)單入門,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
詳解JavaScript如何實(shí)現(xiàn)更短時(shí)間的延時(shí)函數(shù)
在項(xiàng)目開發(fā)中,經(jīng)常能遇到需要延時(shí)執(zhí)行的需求,比如實(shí)現(xiàn)一個(gè)定時(shí)器功能,本文主要和大家介紹了JS如何實(shí)現(xiàn)更短時(shí)間的延時(shí)函數(shù),需要的可以參考下2024-03-03
layer設(shè)置maxWidth及maxHeight解決方案
這篇文章主要介紹了layer設(shè)置maxWidth及maxHeight解決方案,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
js實(shí)現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能示例【附源碼下載】
這篇文章主要介紹了js實(shí)現(xiàn)類似iphone的網(wǎng)頁滑屏解鎖功能,結(jié)合完整實(shí)例形式分析了javascript動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)解鎖效果的相關(guān)實(shí)現(xiàn)技巧,并附帶供讀者源碼下載參考,需要的朋友可以參考下2019-06-06
JS常用正則表達(dá)式總結(jié)【經(jīng)典】
這篇文章主要介紹了JS常用正則表達(dá)式,總結(jié)分析了常見的數(shù)字、字符、郵箱、身份證、電話等的正則驗(yàn)證技巧,需要的朋友可以參考下2017-05-05
options預(yù)檢請(qǐng)求的前后端解決方式詳解
這篇文章主要為大家介紹了options預(yù)檢請(qǐng)求的前后端解決方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
解決js中的setInterval清空定時(shí)器不管用問題
這篇文章主要介紹了解決js中的setInterval清空定時(shí)器不管用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11

