解析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 09 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
js 判断各种数据类型的简单方法(推荐)
Aug 29 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
tensorflow的计算图总结
2020/01/12 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
Python调用JavaScript代码的方法
2020/10/27 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
华为慧通笔试题
2016/04/22 面试题
后勤主管岗位职责
2014/03/01 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
JS高级程序设计之class继承重点详解
2022/07/07 Javascript