[Effective JavaScript 笔记] 第6条:了解分号插入的局限
分号可以省略
js可以在语句结束不强制加分号。(建议还是添加,不添加分号往往会出现不易发现的BUG)
function Point(x,y){
this.x=x||0;
this.y=y||0;
}
Point.prototype.isOrigin=function(){
return this.x===0 && this.y===0
}
上面代码可以运行,是由于js可以自动插入分号,它是一种程序解析技术。能推断出某些上下文中省略的分号,然后有效地自动地将分号“插入”到程序中。
ECMAScript标准细心地制定了分号插入机制,可以方便移植。
分号插入的陷阱
不能避免学习其规则,受分号插入的影响,js语法有一些额外的限制。
分号插入的原则
第一条原则
分号仅在}标记之前、一个或多个换行之后和程序输入的结尾被插入。
讲人话就是,你只能在一行、一个代码块和一段程序结束的地方省略分号。
function square(x){
var n=+x
return n*n
}
function area(r){r=+r;return Math.PI*r*r}
function add1(x){return x+1}
不合法的
function area(x){r=+r return Math.PI*r*r}
第二条原则
分号仅在随后的输入标记不能解析时插入。
人话:分号插入是一种错误校正规则。
a=b
(f());
能解析为一条单独的语句,等价于:
a=b(f());
没有分号插入,因为b(f())是一个合法的语句
a=b
f();
会解析为两条独立的语句
a=b f();
解析有误。
这条说明你省略分号的时候一定要小心。
有问题的字符
5个明确有问题的字符需要密切注意:(、[、+、/。
每个字符都能作为一个表达式运算符或一条语句的前缀,依赖于上下文。
小心以表达式结束的语句,如赋值语句。下一行以上面这5个字符的其中之一开始,不插入分号。
出问题最好的是以(或[开头的语句。
a=b
[“r”,”g”,”b”].forEach(function(key){
bakcground[key]=foreground[key]/2;
});
这句话会被等价于
a=b[“r”,”g”,”b”].forEach(function(key){
bakcground[key]=foreground[key]/2;
});
注意:中括号表达式有点怪,js允许逗号分隔表达式,常用于声明多个变量,逗号分隔符用于赋值时,操作符总会返回最后一个表达式的值。

+、-、/字符出现在语句开始并不常见,但也有这种情况。
+号:

10是立即运行的结果
NaN是+undefined的结果
/号:出现在语句的开始实际不是一个入口标记,而是正则表达式

/Error/i.test(str)&&fail();
(&&是一种短路操作,即如果第一个操作数能够决定结果,那么就不会再对第二个操作数求值。)
如果/Error/i.test(str)结果为真,才会执行fail()操作。
但如果情况如下
a=b
/Error/i.test(str)&&fail();
会被解析为
a=b/Error/i.test(str)&&fail();
/被当成除法运算符了。
想省略分号,可以在语句后跟一个声明,以保证语句不会被错误解析。
a=b
var x
(f())
重构时可能被人改为
var x
a=b
(f())
虽然上面把var语句提前,这两段代码应该是等价的。但事实上,b后面跟着的一个括号,会被错误地解析为
var x;
a=b(f());
结果,你还是要小心省略分号的地方,检查接下来的一行开始的标记是否会禁止自动插入分号。
或者在(、[、+、/字符的开始前置加一个额外的分号语句的方法。
a=b
var x
;(f())
现在把var提前也不会出错了。
var x
a=b
;(f())
另外一个常见的情况是,省略分号可能导致脚本连接问题。每个文件可能由大量的函数表达式组成。
file1.js
(function(){
//…..
})()
file2.js
(function(){
//…..
})()
当合并压缩时,结果被视为
(function(){
//….
})()(function(){
//….
})();
省略分号时,不仅要当心当前文件的下一个标记,而且要当心脚本合并时可能出现在语句之后的任一标记。
可以防御性在加一个前缀的分号以保护脚本免受合并的影响。
file1.js
;(function(){
//…..
})()
file2.js
;(function(){
//…..
})()
合并后
;(function(){
//….
})();(function(){
//….
})();
脚本正常运行。
那么不省略任何分号,是不是就没有问题了呢?也不尽然,如
在打
return {};
时打成
return
{};
没有返回一个对象,因为上面这句被解析成
return ;
{}
;
3条单独的语句。
这就是所谓的js语法限制产生式,它不允许在两个字符之间出现换行。如果存在换行,可能会被自动插入分号。
如上面的return 语句。在return关键字和其可选参数之间一定不能出现换行.
其它的限制产生式:
- throw语句
- 带有显式标签的break或continue语句
- 后置自增或自减运算符
最后一条是为了消除以下情况
a
++
b
会被解析为
a;++b;
第三条规则
分号不会作为分隔符在for循环空语句的头部被自动插入。
人话:你必须在for循环的头部显式地包含分号。
for(var i=0,len=20
i<len
i++
){
//…
}
上面会出现语法错误。

空循环的while同样也需要显式的分号。否则也会报错
function infiniteLoop(){while(true)}

必须写成
function infiniteLoop(){while(true);}

提示
- 仅在“}”标记之前、一行的结束和程序的结束处自动插入分号
- 仅在紧接着的标记不能被解析的时候插入分号
- 在以(、[、+、-、/字符开头的语句前绝不能省略分号
- 当脚本文件进行连接时,在脚本开头加上防御性的分号
- 在return、throw、 break 、continue、 ++、 --的参数之前绝不能换行
- 分号不能作为for循环的头部或空语句的分隔符而自动插入

[Effective JavaScript 笔记] 第6条:了解分号插入的局限的更多相关文章
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- [Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑
构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.t ...
- [Effective JavaScript 笔记]第46条:使用数组而不要使用字典来存储有序集合
对象属性无序性 js对象是一个无序属性集合. var obj={}; obj.a=10; obj.b=30; 属性a和属性b并没有谁前谁后之说.for...in循环,先输出哪个属性都有可能.获取和设置 ...
- [Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染
之前的43条,44条讨论了属性的枚举,但都没有彻底地解决属性查找中原型污染的问题.看下面关于字典的一些操作 'zhangsan' in dict; dict.zhangsan; dict.zhangs ...
- [Effective JavaScript 笔记]第67条:绝不要同步地调用异步的回调函数
设想有downloadAsync函数的一种变种,它持有一个缓存(实现为一个Dict)来避免多次下载同一个文件.在文件已经被缓存的情况下,立即调用回调函数是最优选择. var cache=new Dic ...
- [Effective JavaScript 笔记]第66条:使用计数器来执行并行操作
第63条建议使用工具函数downloadAllAsync接收一个URL数组并下载所有文件,结果返回一个存储了文件内容的数组,每个URL对应一个字符串.downloadAllAsync并不只有清理嵌套回 ...
随机推荐
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- GCD 深入理解:第二部分
在本系列的第一部分中,你已经学到超过你想像的关于并发.线程以及GCD 如何工作的知识.通过在初始化时利用 dispatch_once,你创建了一个线程安全的 PhotoManager 单例,而且你通过 ...
- 复合sql
update select update bucp..Core_Flow_Opinion set useruid =(select user_uid from bua..bua_user b wher ...
- 前端自动化神器LiveReload配合浏览器和less/sass使用方法
前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊 ...
- easyUI icon中文命名图片无法在浏览器中访问处理方法
本身的原因是Tomcat没有设置URIencoding,导致无法识别 在Tomcat 文件夹 conf 中 server.xml中加 URIEncoding="utf-8" 可以 ...
- 在Eclipse 中安装插件 Activiti
(1)在eclipse中菜单help->Install New software中,点击add (2)输入要安装的插件的名字和路径 Name:Activiti BPMN 2.0 designer ...
- Visio绘制时序图
用visio建立时序图 1.选择模版 2.常见符号 时序图创建步骤 1.确定交互过程的上下文: 2.识别参与过程的交互对象: 3.为每个对象设置生命线: 4.从初始消息开始,依次画出随后消息: 5.考 ...
- Linux File、File Directory IO Operation Summary(undone)
目录 . 引言 . Linux下文件操作API . Linux下文件目录操作API . Linux下的其他设备操作API 1. 引言 Linux支持多种文件系统,如ext.ext2.minix.iso ...
- eclipse中建python项目并运行
1. Help → Install New Software 2.Enter http://pydev.org/updates 3.点击Click "Next" and " ...
- 一个cheat命令 == Linux命令小抄大全
本文介绍一个Linux超级命令,有了这个命令,你就可以开开心心的使用linux上的各种命令了.当你要执行一个linux命令,在这个命令参数选项众多时,你一般怎么做?对,我们大多数人都会去求助man命令 ...