在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中的Location地址对象
Jan 16 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
Aug 28 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
js表单登陆验证示例
Oct 19 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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聊天室技术
2006/10/09 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
重学JS之显示强制类型转换详解
2019/06/30 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
一个检测OpenSSL心脏出血漏洞的Python脚本分享
2014/04/10 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
详解python eval函数的妙用
2017/11/16 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
行政前台岗位职责
2013/12/04 职场文书
西式婚礼证婚词
2014/01/12 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
保研导师推荐信
2015/03/25 职场文书
React如何创建组件
2021/06/27 Javascript