解析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 相关文章推荐
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
javascript解析json数据的3种方式
May 08 Javascript
javascript中 try catch用法
Aug 16 Javascript
jQuery基于json与cookie实现购物车的方法
Apr 15 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php链表用法实例分析
2015/07/09 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
一个JS翻页效果
2007/07/23 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
2015/07/26 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
Python base64编码解码实例
2015/06/21 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Django与JS交互的示例代码
2017/08/23 Python
python创建文件备份的脚本
2018/09/11 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
2014民事授权委托书范本
2014/09/29 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
简易版租房协议书范本
2014/10/13 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
学习党章心得体会2016
2016/01/15 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
关于mysql中string和number的转换问题
2022/06/14 MySQL