在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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
Jul 31 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
安装vue-cli的简易过程
May 22 Javascript
微信小程序实现星星评价效果
Nov 02 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
js消除图片小游戏代码
Dec 11 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数组最大值,最小值的代码
2011/10/31 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
高质量PHP代码的50个实用技巧必备(上)
2016/01/22 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP培训要多少钱
2017/06/06 PHP
21个值得收藏的Javascript技巧
2014/02/04 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
2017/09/03 jQuery
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
Python help()函数用法详解
2014/03/11 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
物业经理求职自我评价
2013/09/22 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
如何写辞职信
2015/05/13 职场文书
高中运动会前导词
2015/07/20 职场文书
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
MySQL数据库简介与基本操作
2022/05/30 MySQL