在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 ajax 用户无刷新登录方法详解
Apr 28 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
AngularJS中的指令全面解析(必看)
May 20 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
用jquery的attr方法实现图片切换效果
Feb 05 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
vue.js的安装方法
May 12 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
基于Swiper实现移动端页面图片轮播效果
2017/12/28 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
JS实现分页导航效果
2020/02/19 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
学习python类方法与对象方法
2016/03/15 Python
详细介绍Python的鸭子类型
2016/09/12 Python
浅析Python四种数据类型
2018/09/26 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
Python Selenium截图功能实现代码
2020/04/26 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
医生实习工作总结的自我评价
2013/09/27 职场文书
典型事迹材料范文
2014/12/29 职场文书
人生遥控器观后感
2015/06/11 职场文书
详解pytorch创建tensor函数
2022/03/22 Python