详解JavaScript语法对{}处理的坑爹之处


Posted in Javascript onJune 05, 2014

JavaScript的语法有多坑,算是众人皆知了。

先来上张图

详解JavaScript语法对{}处理的坑爹之处

代码如下:

{} + [];    // 0
[] + {};    // "[object Object]"
{} + [] == [] + {};    // false
({} + [] == [] + {});    // true

这么蛋疼的语法坑估计也只有 JavaScript 这样的奇葩才有。

相信对于绝大部分不研究 JavaScript 编译器的童鞋,根本无法理解。(至少我也是觉得不可思议)

后来专门去度娘了一下,才有点恍然大悟!

下面,我们先看看这个代码:

{
    a: 1
}

相信大部分童鞋,第一眼都会认为这是一个 对象直接量 。

那这个代码呢?

{
    var a = 1;
}

浏览器会提示语法错误吗?

显然不会!细想一下,我们就会明白到,这是一个 语句块 。

if (isNumber) {
    var a = 1;
}

说到这里,敏锐的你可能已经发现:JavaScript 中以 { 开头,会存在二义性。

那 JavaScript 的编译器是怎么处理这个二义性的?

    了解决这个问题,ECMA 的方法十分简单粗暴:在语法解析的时候,如果一个语句以「{」开头,就只把它解释成语句块。

这真心是一个坑爹的处理方式!

那既然都是语句块,那为什么 {a:1} 却没有语法错误?

其实在这里,a 被解析器理解为了 标签。标签 是用来配合 break 和 continue 语句作定向跳转的。

因此,这样的写法就会抛出异常:

{
    a: function () {}
}

因为 function () {}  不是函数声明,也不是函数表达式。

到这里,大家应该对 {} 的奇葩处理有了基本的概念。我们再看回文章开始所提到的几条语句:

{} + [];    // 0
[] + {};    // "[object Object]"
{} + [] == [] + {};    // false
({} + [] == [] + {});    // true

第一条,因为 {} 是 语句块,代码可以理解为:

if (1) {}
+[]

所以返回值是 0 。

第二条,由于 {} 并不在语句的开头,所以是一个正常的 对象直接量,空数组和空对象直接相加,返回 "[object Object]" 。

理解了第一第二条,第三条已经无需解释了。

第四条,因为是 () 开始,第一个 {} 被解析为 对象直接量 ,因而两条公式相等,返回 true。

Javascript 相关文章推荐
一句话JavaScript表单验证代码
Aug 02 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
jQuery 选择器详解
Jan 19 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
不使用script导入js文件的几种方法
Oct 27 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 #Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 #Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 #Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 #Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 #Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 #Javascript
删除条目时弹出的确认对话框
Jun 05 #Javascript
You might like
重置版战役片段
2020/04/09 魔兽争霸
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
PHP CURL使用详解
2019/03/21 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
javascript计时器详解
2015/02/28 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python字符串,数值计算
2016/10/05 Python
python 读入多行数据的实例
2018/04/19 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
python是否适合网页编程详解
2019/10/04 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
交通法规咨询中心工作职责
2013/11/27 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
Pandas加速代码之避免使用for循环
2021/05/30 Python