解析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 函数式编程的原理
Oct 16 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
解决vue-cli中stylus无法使用的问题方法
Jun 19 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
Bootstrap一款超好用的前端框架
Sep 25 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
Vue组件实现触底判断
Jun 26 Javascript
vue 集成jTopo 处理方法
Aug 07 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(2)
2006/10/09 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JavaScript知识点整理
2015/12/09 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python request中文乱码问题解决方案
2020/09/17 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
小学生学习感言
2014/03/10 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
干部作风建设工作总结
2014/10/29 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2015年财政局工作总结
2015/05/21 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python