[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);}

提示

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

时间: 2024-10-14 00:19:13

[Effective JavaScript 笔记] 第6条:了解分号插入的局限的相关文章

[Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+1}" 反射获取函数源代码的功能很强大,使用函数对象的toString方法有严重的局限性.toString方法的局限性ECMAScript标准对函数对象的toString方法的返回结果(即该字符串)并没有任何要求.这意味着不同的js引擎将产生不同的字符串,甚至产生的字符串与该函数并不相关. 如果函数

[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式传递给eval函数以达到同样的功能.程序员面临一个选择:应该将代码表示为函数还是字符串?毫无疑问,应该将代码表示为函数.字符串表示代码不够灵活的一个重要原因是:它们不是闭包. 闭包回顾 看下面这个图 js的函数值包含了比调用它们时执行所需要的代码还要多的信息.而且js函数值还在内部存储它们可能会引用

[Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //"number" typeof "s";//"string" typeof null;//"object":ECMAScript把null描述为独特的类型,但返回值却是对象类型,有点困惑. 可以使用Object.prototype.t

[Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑

构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.txt',function(file){ console.log('file:'+file); }); 基于promise的API不接收回调函数作为参数.相反,它返回一个promise对象,该对象通过其自身的then方法接收回调函数. var p=downloadP('file.txt'); p.th

[Effective JavaScript 笔记]第46条:使用数组而不要使用字典来存储有序集合

对象属性无序性 js对象是一个无序属性集合. var obj={}; obj.a=10; obj.b=30; 属性a和属性b并没有谁前谁后之说.for...in循环,先输出哪个属性都有可能.获取和设置不同的属性与顺序无关,都会以大致相同的效率产生相同的结果.也就是说访问属性a和访问属性b,没有哪个访问更快之说.ES标准并未规定属性存储的任何特定顺序,甚至于枚举对象也未涉及.for...in循环会挑选一定的顺序来枚举对象的属性,标准允许js引擎自由选择一个顺序,它们的选择会微妙地改变程序行为.如要

[Effective JavaScript 笔记]第15条:当心局部块函数声明笨拙的作用域

嵌套函数声明.没有标准的方法在局部块里声明函数,但可以在另一个函数的顶部嵌套函数声明. function f(){return "global"} function test(x){ var result=[]; function f(){return "local";}//block-local if(x){ result.push(f()); } result.push(f()); return result; } test(true);//["loc

[Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染

之前的43条,44条讨论了属性的枚举,但都没有彻底地解决属性查找中原型污染的问题.看下面关于字典的一些操作 'zhangsan' in dict; dict.zhangsan; dict.zhangsan=22; js的对象操作总是经继承的方式工作的.即使是一个空的对象字面量也是继承了Object.protoype属性. var dict={}; 'zhangsan' in dict;//false 'lisi' in dict;//false 'wangwu' in dict;//false'

[Effective JavaScript 笔记]第67条:绝不要同步地调用异步的回调函数

设想有downloadAsync函数的一种变种,它持有一个缓存(实现为一个Dict)来避免多次下载同一个文件.在文件已经被缓存的情况下,立即调用回调函数是最优选择. var cache=new Dict(); function downloadCachingAsync(url,onsuccess,onerror){ if(cache.has(url)){ onsuccess(cache.get(url)); return; } return downloadAsync(url,function(

[Effective JavaScript 笔记]第60条:支持方法链

无状态的API的部分能力是将复杂操作分解为更小的操作的灵活性.一个很好的例子是字符串的replace方法.由于结果本身也是字符串,可以对前一个replace操作重复执行替换.这种模式的一个常见用例是在将字符串插入到HTML前替换字符串的特殊字符字母. function escapeBasicHTML(str){ return str.replace(/&/g,"&") .replace(/< /g,"<") .replace(/>/