十、{ } 、 ( )有话说

javascript编入集

昨天在群里,激烈的讨论着一个很简单的问题 ( {}+[] ) 输出什么。其实,只要明白这里 + 是干什么的就很容易知道这个是干什么的实际上就是两个对象的“加法”

( {}+[] ) // 等价于
({}.toString() + [].toString())

但是为什么会有一个 ( ) 包裹起来呢,还是说为什么这里{ }在前就需要用到它。
在这之前,需要说一下 { }
{ } 它本身代表的含义是 object对象的字面量。但是同时他又代表的是函数体或者复合语句块(block)。比如

function some ()
{  }
// or
if()
{   }
while()
{   }
// or
{  }

虽然换行了,但是这样写是没有错的。
并且来说,如果单独的 { } 是作为语句块来执行的,内部内容等效于 eval 看(block)NOTE 部分

{ var a =1 } //
eval("var a = 1")

但是如果只单独写:

{  } + [ ]

如果只写了一个这个的话,左边就不能严格的区分是对象
实际上这句话在解释的时候被解释为了两句:

{};
+[];

所以不管左侧的 {} 是什么内容,都不会被右侧的 + 所使用。

但是 加上( )之后,就不是了。
( ) 代表的是表达式。表达式内是不主动加;[1],因此, ( {} + [] ) 就可以得到正确的运算结果了。
如果反过来,就不会出事:

[] + {}

那是因为 这里的[ ] 并不会被解释为其他行为,所以不会断句。就可以正确得到想要的结果了。

具体的执行流程需要看一下AST(Abstract Syntax Tree)[2],同时一款工具 esprima可以查看具体解析内容。

先知且为之,后知而食之


  1. 添加;的行为只在语句的末尾添加,如果下一行可以与上一行连用,则不会加。因为js是会被压缩到一行的,解释器为了解释所以会主动进行断句。

  2. 抽象语法树,将js的源文件解释为可以执行的语法树,标注每一个语句的具体内容

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容