写出更好的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 相关文章推荐
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
js比较日期大小的方法
May 12 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
JavaScript错误处理和堆栈追踪详解
Apr 18 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
vue实现购物车结算功能
Jun 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP chop()函数讲解
2019/02/11 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
js实现宇宙星空背景效果的方法
2015/03/03 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
基于wordpress的ajax写法详解
2018/01/02 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python中的getopt函数使用详解
2015/07/28 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python正则匹配判断手机号是否合法的方法
2020/12/09 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
浅谈python常用程序算法
2019/03/22 Python
Python wordcloud库安装方法总结
2020/12/31 Python
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
学生会生活部工作总结2015
2015/03/31 职场文书
花木兰观后感
2015/06/10 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫