解析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默认校验规则整理
Mar 24 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
JS搜狐面试题分析
Dec 16 Javascript
JavaScript数组复制详解
Feb 02 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Vite和Vue CLI的优劣
Jan 30 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会员权限控制实现原理分析
2011/05/29 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
jQuery实现div横向拖拽排序的简单实例
2016/07/13 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
理解 javascript 中的函数表达式与函数声明
2017/07/07 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python如何查看系统网络流量的信息
2016/09/12 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
提升Python程序性能的7个习惯
2019/04/14 Python
Python如何调用外部系统命令
2019/08/07 Python
python numpy数组复制使用实例解析
2020/01/10 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
基于css3实现漂亮便签样式
2013/03/18 HTML / CSS
HTML5中的新元素介绍
2008/10/17 HTML / CSS
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
银行金融服务方案
2014/06/11 职场文书
2014年纪委工作总结
2014/12/05 职场文书
2014年科普工作总结
2014/12/06 职场文书
如何写通讯稿
2015/07/22 职场文书
同学会感言
2015/07/30 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技