解析Javascript中大括号“{}”的多义性


Posted in Javascript onDecember 02, 2013

JS中大括号有四种语义作用

语义1,组织复合语句,这是最常见的

if( condition ) { 
  //... 
}else { 
  //... 
} 
for() { 
  //... 
}

语义2,对象直接量声明
var obj = { 
    name : 'jack', 
    age : 23 
};

整个是个赋值语句,其中的{name:'jack',age:23}是个表达式。

语义3,声明函数或函数直接量

function f1(){ 
    //... 
} var f2 = function(){ 
    //... 
}

f1与非f2的区别是前者在语法解释期,后者在运行期。区别在于:如果调用该函数的代码在函数定义之后,则没有区别;如果调用该函数的代码在函数定义之前,则f1仍然可以调用,f2则会报错,提示f2未定义。

语义4,结构化异常处理的语法符号

try { 
    //... 
}catch( ex ){ 
    //... 
}finally{ 
    //... 
}

这里的大括号与符合语句(语义1 )是有区别的,大括号中如果只有一条语句,在if/else/for等中大括号是可以省略的,但try/catch/finally则不能省略。

以下代码纠结了偶N久

function(){}() //匿名函数立即执行, 语法分析期报 
{}.constructor //获取对象直接量的构造器,语法分析期报错

令人不解的是为何[].constructor这么写却不报错呢,一个是想获取对象直接量的构造器,一个是获取数组直接量的构造器而已。

当然添加个变量接收也不会报错

var c = {}.constructor;

同样的情况如

var fn = function(){}(),也不会报错。

实际上是js的“语句优先”在作怪,即{}被理解成复合语句块(语义1 )而不是对象直接量(语义2 )或声明函数(语义3 )的语义。

function(){}(),大括号被理解成复合语句,自然前面的function()声明函数的语法不完整导致语法分析期出错。

{}.constructor,大括号被理解成复合语句,大括号后面是点运算符,点运算符前没有合理的对象自然也报错。

修复方式众所周知:加个强制运算符()
(function(){})(),(function(){});//强制其理解为函数(语义3 ),“函数()”表示执行该函数,即声明后立即执行了。

({}).constructor //({})强制把大括号理解成对象直接量(语义2 ),“对象.xx”表示获取对象的成员,自然后面的点运算符可以正常执行了。

Javascript 相关文章推荐
javascript 事件绑定问题
Jan 01 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
javascript禁止超链接跳转的方法
Feb 02 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
ionic2懒加载配置详解
Sep 01 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 #Javascript
解析JavaScript中的不可见数据类型
Dec 02 #Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 #Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 #Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 #Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 #Javascript
浅析jquery的作用与优势
Dec 02 #Javascript
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
javascript每日必学之循环
2016/02/19 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
Python3中的json模块使用详解
2018/05/05 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
巴西购物网站:Submarino
2020/01/19 全球购物
初婚初育证明
2014/01/14 职场文书
计算机相关的自我评价
2014/01/15 职场文书
购房委托书
2014/10/15 职场文书
万里长城导游词
2015/01/30 职场文书
2015年大学生工作总结
2015/04/21 职场文书
电影雷锋观后感
2015/06/10 职场文书
安全伴我行主题班会
2015/08/13 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
SQL Server携程核心系统无感迁移到MySQL实战
2022/06/01 SQL Server
redis protocol通信协议及使用详解
2022/07/15 Redis