写出更好的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类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
jQuery实现简单弹幕制作
Dec 10 jQuery
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实现的百度搜索某地天气的小偷代码
2014/04/23 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
10款实用的PHP开源工具
2015/10/23 PHP
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
2014/06/30 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
python3.3使用tkinter开发猜数字游戏示例
2014/03/14 Python
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python编程实现蚁群算法详解
2017/11/13 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
python3多线程知识点总结
2019/09/26 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
python中最小二乘法详细讲解
2021/02/19 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
迎新晚会主持词
2014/03/24 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
2014年党员个人工作总结
2014/12/02 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle