解析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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 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
谈一谈收音机的高放电路
2021/03/02 无线电
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php提取微信账单的有效信息
2018/10/01 PHP
Array.prototype.slice.apply的使用方法
2010/03/17 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
react-router中的属性详解
2017/06/01 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python help()函数用法详解
2014/03/11 Python
python 容器总结整理
2017/04/04 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
高考考python编程是真的吗
2020/07/20 Python
django创建css文件夹的具体方法
2020/07/31 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
工程技术员岗位职责
2015/04/11 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
叶问观后感
2015/06/15 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
2015年国庆节广播稿
2015/08/19 职场文书