解析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 Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
用正则表达式替换图片地址img标签
Nov 22 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
详解react-redux插件入门
Apr 19 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 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获取后台Job管理的实现代码
2011/06/10 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jQuery 选择器理解
2010/03/16 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
np.random.seed() 的使用详解
2020/01/14 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
大学生四年生活自我鉴定
2013/11/21 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
优秀班组申报材料
2014/12/25 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
python基础之函数的定义和调用
2021/10/24 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python