浅析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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
taro开发微信小程序的实践
May 21 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
Aug 23 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 Javascript
Node.js API详解之 os模块用法实例分析
May 06 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函数in_array()使用详解
2014/08/20 PHP
PHP实现动态web服务器方法
2015/07/29 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
jQuery移动端图片上传组件
2016/06/12 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
详解webpack介绍&安装&常用命令
2017/06/29 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Django实现组合搜索的方法示例
2018/01/23 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python判断有效的数独算法示例
2019/02/23 Python
深入了解Django View(视图系统)
2019/07/23 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
什么是数据抽象
2016/11/26 面试题
竞选班长演讲稿400字
2014/08/22 职场文书
初中优秀学生评语
2014/12/29 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
红高粱观后感
2015/06/10 职场文书
员工给公司的建议书
2019/06/24 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js