解析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 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
用JS实现飞机大战小游戏
Jun 09 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
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
令PHP初学者头疼十四条问题大总结
2008/11/12 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js身份证验证超强脚本
2008/10/26 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
python 实现字符串下标的输出功能
2020/02/13 Python
Python接口测试数据库封装实现原理
2020/05/09 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
css3实现wifi信号逐渐增强效果实例
2017/08/09 HTML / CSS
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
几道数据库的概念性面试题
2014/05/30 面试题
升职自荐书范文
2013/11/28 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
领导干部保密承诺书
2014/08/30 职场文书
公务员培的训心得体会
2014/09/01 职场文书
财务审计整改报告
2014/11/06 职场文书
羊脂球读书笔记
2015/06/30 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle