在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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
深入理解vue路由的使用
Mar 24 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 Javascript
微信小程序云开发之使用云数据库
May 17 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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
php数组比较实现查找连续数的方法
2015/07/29 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
Python模块学习 filecmp 文件比较
2012/08/27 Python
极简的Python入门指引
2015/04/01 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Ubuntu下使用Python实现游戏制作中的切分图片功能
2018/03/30 Python
python删除不需要的python文件方法
2018/04/24 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
Django框架请求生命周期实现原理
2020/11/13 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
开办加工厂创业计划书
2014/01/03 职场文书
毕业设计计划书
2014/01/09 职场文书
招聘单位介绍信
2014/01/14 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
吧主申请感言怎么写
2015/08/03 职场文书