浅析Javascript的自动分号插入(ASI)机制


Posted in Javascript onSeptember 29, 2016

前言

相信从事过C#和Java的大家都知道分号是用作断句(EOS,end of statement)的,而且必须加分号,否则编译就不通过了。但JavaScript由于存在ASI机制,因此允许我们省略分号。ASI机制不是说在解析过程中解析器自动把分号添加到代码中,而是说解析器除了分号还会以换行为基础按一定的规则作为断句的依据,从而保证解析的正确性。

规范理论

es5 标准定义了自动分号插入规则,包括以下三个基本规则加两个前置条件:

前置条件

1、如果插入分号后解析结果是空语句,那么不会自动插入分号。

例子:(空语句,else 前不加分好)

if (a > b) 
else c = d

2、如果插入分号后它成为 for 语句头部的两个分号之一,那么不会自动插入分号。

例子:(不会加分号)

for (a; b 
)

基本规则

左到右解析程序,当遇到一个不符合任何文法产生式的 token(叫做 违规 token(offending token)),那么只要满足下面条件之一就在违规 token 前面自动插入分号。

     1、至少一个 LineTerminator 分割了违规 token 和前一个 token

     2、违规 token 是 }。

例子:(1、2不符合任何产生式,并且之间存在 LineTerminator,因此在违规 token 2前加了分好,2和}则是因为违规 token 是 }所以加了分号)

{ 1
2 } 3
{ 1
;2 ;} 3;

左到右解析程序,tokens 输入流已经结束,当解析器无法将输入 token 流解析成单个完整 ECMAScript 程序 ,那么就在输入流的结束位置自动插入分号。

对于受限产生式,也就是下面的5个,我们把产生式 [no LineTerminator here]后面的 token 叫做受限 token,如果在 token 和 受限 token 间存在了至少一个 LineTerminator,那么会在受限 token 前自动加上 token

受限的产生式只限如下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、后缀运算符 ++ 或 -- 和它的操作数应该出现在同一行。

     2、return throw 语句的表达式开始位置应该和 return throw token 同一行。

     3、break 或 continue 语句的标示符应该和 break continue token 同一行。

何时加分号

无分号党(懒人党)想要不加分号,那么就需要知道什么时候应该要加分号。网上的一篇文章归纳了 NO ASI 并且会出现错误的几种情况,在这几种情况下我们是要加分号的。下面是对应的描述:

在以 ([/+- 开头的语句前加分号(由于正常写法均不会出现以 .,*% 作为语句开头,因此只需记住前面5个即可,你看能懒则懒哦)

不过这里只考虑了换行的情况,其实 ASI 还存在不换行的情况,这就要根据标准里的三条规则行事了!

知道了这点,其实我们就可以省略大部分的分号了。但是也不强求,因为这还是要根据个人习惯以及团队风格走的。

小补充

为什么自执行函数前要加分号?

主要是应对代码合并压缩时,由于缺少分号;带来的错误。知道了上面的规则,在 ( 开头的行前加分号就可以避免错误了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
javascript实现无缝上下滚动特效
Dec 16 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
node.JS md5加密中文与php结果不一致的解决方法
May 05 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
js验证账户名是否重复
May 26 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 #Javascript
JSON 对象未定义错误的解决方法
Sep 29 #Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 #Javascript
json定义及jquery操作json的方法
Sep 29 #Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 #Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 #Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 #Javascript
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
网络资源
2006/10/09 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
微信支付 JS API支付接口详解
2016/07/11 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成"...")
2016/11/28 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
在Django框架中编写Contact表单的教程
2015/07/17 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
python将回车作为输入内容的实例
2018/06/23 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python numpy存取文件的方式
2020/04/01 Python
python drf各类组件的用法和作用
2021/01/12 Python
英国女性时尚品牌:Apricot
2018/12/04 全球购物
软件测试企业面试试卷
2016/07/13 面试题
茶叶生产计划书
2014/01/10 职场文书
学校安全教育制度
2014/01/31 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
学期评语大全
2014/04/30 职场文书
优秀大学生自荐信
2014/06/09 职场文书
催款函怎么写
2015/06/24 职场文书
教育读书笔记
2015/07/02 职场文书
校友会致辞
2015/07/30 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
keepalived + nginx 实现高可用方案
2022/12/24 Servers