写出更好的JavaScript之undefined篇(上)


Posted in Javascript onNovember 22, 2009

“全局变量”和“全局对象的属性”是指同样的东西,只是因为要配合上下文才用了不同的说法,正文中我就不再另外解释了;“声明”指通过“var”语句声明变量和/或对函数及其签名的定义;“变量”指通过“var”语句声明过或者在函数体中试图访问的命名参数;“undefined”指名为“undefined”的值(全局或本地变量),而“未定义”指type(...) == “undefined”的情况;“output”是一个显示传入参数的函数,可以看作是“alert”的同类。

我们写JavaScript程序的时候总有需要用到“未定义”的时候,比方说我们要知道某一个值是不是已经经过赋值,或者我们希望消除某一个已经赋予的值,我们就可能这样做:

output(myVar === undefined); 
myVar = undefined;

然而这样做并不太好,如果我们尝试“读”(或者比较)一个不存在的变量,就会引发一个异常。
比方说如果因为设计得不够周全,执行上面的代码的时候还没有定义过myVar这个变量,上面的代码就会出错;
另外在较早的浏览器版本上,也不存在undefined这个预定义值,所以为了提高兼容性和容错性,我们可以这样做:
output(typeof(myVar) == "undefined"); 
myVar = void(0);

typeof运算符是JavaScript的语言功能,虽然上面的代码看起来像是这样的一种东西:
output(oneFunction(myVar) == "undefined"); 
myVar = void(0);

但这两者有一个重要区别——当myVar不存在的时候,前者可以正确执行,并返回字符串"undefined";而后者不管内部构造是什么样的,都会引发异常。
void则是另一个语言功能,这个运算符的意义是向脚本的其它部分隐藏它的传入参数;而假如有一个语句试图得到void“运算”的结果,它就只能得到“未定义”。
因为void的这个特性,void最常见的功能就有两种:一是像上面的代码中那样将“未定义”值赋予给其它变量/属性;另一种就是像下面这样:
<a href="javascript:void(favList.push(curItem));">添加到收藏列表</a>
其中favList是一个JavaScript数组,而curItem是一个已经定义的对象——数组的push方法会返回执行push操作以后数组的长度,在这个例子里面这个长度对我们来说一点用都没有,但如果放任它不管的话,浏览器就可能会跳转到一个几乎为空白的脚本结果页面,只显示push的返回值,比方说“3”。
因此需要用一个void运算符来“欺骗”浏览器:这里啥都没有。
现在把目光回到对“未定义”的使用上,就会发现前面我们用来同“未定义”比较的“高容错性”的typeof运算符,用起来有点麻烦:总共需要多写“typeof()""”这样10个字符。
虽然我们是成天跟麻烦打交道的程序员,但这也不能说明我们不该想办法减少麻烦啊~各种开发工具其实不都是为了把编程工作变得简单才出现的么?
所以说如果明确知道一个变量一定一定绝对绝对已经声明过,就可以把这个变量直接和已知的“未定义”相比较,比方说这样:
output(myVar === void(0));

相比于使用typeof运算符,后面这个办法除了少打几个字符,还有一些好处:可以避免难以察觉的拼写错误(比方说把“undefined”写成“undefinied”什么的) 。

到这里,最常见的关于“undefined”/“未定义”的技巧,已经介绍完了。
在下一篇里面,我会介绍另一些不太常见的技巧。

Javascript 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 Javascript
COM中获取JavaScript数组大小的代码
Nov 22 #Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 #Javascript
javascript 设置文本框中焦点的位置
Nov 20 #Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 #Javascript
Jquery中增加参数与Json转换代码
Nov 20 #Javascript
ExtJS的FieldSet的column列布局
Nov 20 #Javascript
页面版文本框智能提示JS代码
Nov 20 #Javascript
You might like
php文件夹的创建与删除方法
2015/01/24 PHP
php模拟post提交数据的方法
2015/02/12 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
jQuery length 和 size()区别总结
2018/04/26 jQuery
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
Python中使用SAX解析xml实例
2014/11/21 Python
详解Python Socket网络编程
2016/01/05 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
python如何爬取动态网站
2020/09/09 Python
Python的信号库Blinker用法详解
2020/12/31 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
大众服装店创业计划书范文
2014/01/01 职场文书
表彰先进集体通报
2014/01/12 职场文书
中学生自我鉴定
2014/02/04 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
关于爱国的标语
2014/06/24 职场文书
岗位工作说明书
2014/07/29 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书