详解JavaScript中undefined与null的区别


Posted in Javascript onMarch 29, 2014

有点奇怪的是,JavaScript语言居然有两个表示"无"的值:undefined和null。这是为什么?

一、相似性
在JavaScript中,将一个变量赋值为undefined或null,老实说,几乎没区别。

var a = undefined;
var a = null;

上面代码中,a变量分别被赋值为undefined和null,这两种写法几乎等价。
undefined和null在if语句中,都会被自动转为false,相等运算符甚至直接报告两者相等。

if (!undefined) 
    console.log('undefined is false');
// undefined is false
if (!null) 
    console.log('null is false');
// null is false
undefined == null
// true

上面代码说明,两者的行为是何等相似!
既然undefined和null的含义与用法都差不多,为什么要同时设置两个这样的值,这不是无端增加JavaScript的复杂度,令初学者困扰吗?Google公司开发的JavaScript语言的替代品Dart语言,就明确规定只有null,没有undefined!
二、历史原因
最近,我在读新书《Speaking JavaScript》时,意外发现了这个问题的答案!
原来,这与JavaScript的历史有关。1995年JavaScript诞生时,最初像Java一样,只设置了null作为表示"无"的值。
根据C语言的传统,null被设计成可以自动转为0。

Number(null)
// 0
5 + null
// 5

但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。
首先,null像在Java里一样,被当成一个对象。

typeof null
// "object"

但是,JavaScript的数据类型分成原始类型(primitive)和合成类型(complex)两大类,Brendan Eich觉得表示"无"的值最好不是对象。
其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误。
因此,Brendan Eich又设计了一个undefined。
三、最初设计
JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

Number(undefined)
// NaN
5 + undefined
// NaN

四、目前的用法
但是,上面这样的区分,在实践中很快就被证明不可行。目前,null和undefined基本是同义的,只有一些细微的差别。
null表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。

Object.getPrototypeOf(Object.prototype)
// null

undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。

var i;
i // undefined
function f(x){console.log(x)}
f() // undefined
var  o = new Object();
o.p // undefined
var x = f();
x // undefined

Javascript 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
angular实现form验证实例代码
Jan 17 Javascript
vue 2.x 中axios 封装的get 和post方法
Feb 28 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
JS中箭头函数与this的写法和理解
Jan 14 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 #Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 #Javascript
javascript修改IMG标签的src问题
Mar 28 #Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 #Javascript
JS通过分析userAgent属性来判断浏览器的类型及版本
Mar 28 #Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 #Javascript
js如何调用qq互联api实现第三方登录
Mar 28 #Javascript
You might like
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery大于号(>)选择器的作用解释
2015/01/13 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
jQuery实现弹出层效果
2019/12/10 jQuery
JS实现打字游戏
2019/12/17 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python判断字符串与大小写转换
2015/06/08 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
信访稳定工作汇报
2014/10/27 职场文书
2014年档案室工作总结
2014/12/01 职场文书
扬州个园导游词
2015/02/06 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers