解析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必备 api中英文对照的chm手册 下载
May 03 Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 Javascript
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
DOM节点深度克隆函数cloneNode()用法实例
Jan 12 Javascript
jquery.validate使用详解
Jun 02 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
vue的状态管理模式vuex
Nov 30 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
详解如何写出一个利于扩展的vue路由配置
May 16 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
解析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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
Track Image Loading效果代码分析
2007/08/13 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
js自定义回调函数
2015/12/13 Javascript
jquery.validate使用详解
2016/06/02 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python实现图片文件批量重命名
2020/03/23 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
shell程序中如何注释
2012/01/28 面试题
篮球社团活动总结
2014/06/27 职场文书
运动会广播稿100字
2014/09/14 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
总结Python使用过程中的bug
2021/06/18 Python