写出更好的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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 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
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JavaScript DOM基础
2015/04/13 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
详解cordova打包成webapp的方法
2017/10/18 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
浅谈Python数据类型判断及列表脚本操作
2016/11/04 Python
Python中反射和描述器总结
2018/09/23 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Python各种扩展名区别点整理
2020/02/27 Python
jupyter实现重新加载模块
2020/04/16 Python
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫