写出更好的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应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
Bootstrap精简教程
Nov 27 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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 源代码压缩小工具
2009/12/22 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python使用multiprocessing创建进程的方法
2015/06/04 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python3 max()函数基础用法
2019/02/19 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
行政经理岗位职责
2013/11/09 职场文书
公共场所禁烟标语
2014/06/25 职场文书
党员批评与自我批评(5篇)
2014/09/23 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
紧急通知
2015/04/17 职场文书
教师外出学习心得体会
2016/01/18 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python