在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避免代码的重复执行经验技巧分享
Apr 17 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
网页设计常用的一些技巧
2006/12/22 Javascript
JS 时间显示效果代码
2009/08/23 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
javascript中clone对象详解
2014/12/03 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
Python 常用 PEP8 编码规范详解
2017/01/22 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
体育教学随笔感言
2014/02/24 职场文书
主管竞聘书范文
2014/03/31 职场文书
家长写给孩子的评语
2014/04/18 职场文书
保安辞职信范文
2015/02/28 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android