在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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
ie 调试javascript的工具
Apr 29 Javascript
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
Feb 22 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 Javascript
vue视频播放暂停代码
Nov 08 Javascript
es6函数之尾递归用法实例分析
Apr 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
9个比较实用的php代码片段
2016/03/15 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
editable.js 基于jquery的表格的编辑插件
2011/10/24 Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
Ajax基础知识详解
2017/02/17 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python内存映射文件读写方式
2020/04/24 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
美国狗旅行和户外用品领先供应商:kurgo
2020/08/18 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
推荐信格式范文
2014/05/09 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers