在JS中最常看到切最容易迷惑的语法(转)


Posted in Javascript onOctober 29, 2010

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”表示获取对象的成员,自然后面的点运算符可以正常执行了。

延伸:JQUERY插件编写需要预先运行篇
如果注意一些JQ插件,你经常会发现以下代码:
(function($){$(function(){/*code*/})}($))
如果你看了上面的文章,你就会发现为什么会有这个东西了,很多JQ的插件都需要在没有使用的时候就预先运行的,不过我编写的时候到很少遇到会写这样的插件.不过很多时候也有好处的~~

Javascript 相关文章推荐
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
node.js 动态执行脚本
Jun 02 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
javascript天然的迭代器
Oct 29 #Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 #Javascript
js类型检查实现代码
Oct 29 #Javascript
JavaScript继承方式实例
Oct 29 #Javascript
拖动布局之保存布局页面cookies篇
Oct 29 #Javascript
You might like
PHP生成随机用户名和密码的实现代码
2013/02/27 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
利用php生成验证码
2017/02/23 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
[01:13]这,就是刀塔
2014/07/16 DOTA
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散
2017/11/23 DOTA
Python中for循环详解
2014/01/17 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python 批量修改/替换数据的实例
2018/07/25 Python
用Python实现读写锁的示例代码
2018/11/05 Python
Python设计模式之适配器模式原理与用法详解
2019/01/15 Python
利用python将图片版PDF转文字版PDF
2019/05/03 Python
django中瀑布流写法实例代码
2019/10/14 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
银行实习生自我鉴定范文
2013/09/19 职场文书
技校教师求职简历的自我评价
2013/10/20 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
初中生物教学反思
2016/02/20 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL