在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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
几款极品的javascript压缩混淆工具
May 16 Javascript
javascript 打印内容方法小结
Nov 04 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
Element-UI+Vue模式使用总结
Jan 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
PHP加密3DES报错 Call to undefined function: mcrypt_module_open() 如何解决
2016/04/17 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
JS判断数组那点事
2017/10/10 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
实习医生自我评价
2013/09/22 职场文书
自荐信的禁忌和要点
2013/10/15 职场文书
项目经理任命书内容
2014/06/06 职场文书
学习三严三实心得体会
2014/10/13 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
python热力图实现的完整实例
2022/06/25 Python