详解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 相关文章推荐
js数组Array sort方法使用深入分析
Feb 21 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
基于JavaScript实现报警器提示音效果
Oct 27 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
通过微信公众平台获取公众号文章的方法示例
2019/12/25 Javascript
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python中requests库session对象的妙用详解
2017/10/30 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
如何在 Matplotlib 中更改绘图背景的实现
2020/11/26 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
Python页面加载的等待方式总结
2021/02/28 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
公司行政经理岗位职责
2013/12/24 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
企业宣传工作方案
2014/06/02 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
老龄工作先进事迹
2014/08/15 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
琅琊山导游词
2015/02/05 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
导游词之青岛崂山
2019/12/27 职场文书
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL