解析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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
Dec 06 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
微前端qiankun改造日渐庞大的项目教程
Jun 21 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 注册时输入信息验证器的实现详解
2013/07/05 PHP
显示youtube视频缩略图和Vimeo视频缩略图代码分享
2014/02/13 PHP
php防止伪造数据从地址栏URL提交的方法
2014/08/24 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
利用Three.js如何实现阴影效果实例代码
2017/09/26 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
微信小程序实现页面浮动导航
2019/01/28 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python同步两个文件夹下的内容
2019/08/29 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
外贸公司实习自我鉴定
2013/09/24 职场文书
中层干部竞争上岗演讲稿
2014/01/13 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2014年司机工作总结
2014/11/21 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
社区文明倡议书
2015/04/28 职场文书