在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 相关文章推荐
无刷新预览所选择的图片示例代码
Apr 02 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
javascript常用的方法分享
Jul 01 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
Feb 21 Javascript
解决vue axios的封装 请求状态的错误提示问题
Sep 25 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 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/04/23 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
pycharm创建一个python包方法图解
2019/04/10 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
利用pandas合并多个excel的方法示例
2019/10/10 Python
python3正则模块re的使用方法详解
2020/02/11 Python
python和php学习哪个更有发展
2020/06/17 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
巴西体育用品商店:Lojão dos Esportes
2018/07/21 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
什么是makefile? 如何编写makefile?
2013/01/02 面试题
蓝颜请假条
2014/04/11 职场文书
小学运动会报道稿
2014/10/04 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技