在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 检测浏览器和操作系统的脚本
Dec 26 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
js实现浏览本地文件并显示扩展名的方法
Aug 17 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
javaScript Array api梳理
Mar 31 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
js实现日历
2020/11/07 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
提升Python程序运行效率的6个方法
2015/03/31 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
创先争优一句话承诺
2014/05/29 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
实习单位证明范例
2014/11/17 职场文书
农村老人去世追悼词
2015/06/23 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
python状态机transitions库详解
2021/06/02 Python
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js