详解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 相关文章推荐
IE8 浏览器Cookie的处理
Jan 31 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JS扩展方法实例分析
Apr 15 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
封装了一个支持匿名函数的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
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
php生成验证码函数
2015/10/20 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
详解jQuery中的事件
2016/12/14 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Python unittest模块用法实例分析
2018/05/25 Python
Python操作MySQL数据库的方法
2018/06/20 Python
python实现转圈打印矩阵
2019/03/02 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
Python和Sublime整合过程图示
2019/12/25 Python
在pycharm中实现删除bookmark
2020/02/14 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
单位承诺书格式
2014/05/21 职场文书
三好生演讲稿
2014/09/12 职场文书
追悼词范文大全
2015/06/23 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
MySQL读取JSON转换的方式
2022/03/18 MySQL
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python