详解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 相关文章推荐
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
node.js利用redis数据库缓存数据的方法
Mar 01 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
node.js读取Excel数据(下载图片)的方法示例
Aug 02 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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
用PHP编写PDF文档生成器
2006/10/09 PHP
phpize的深入理解
2013/06/03 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jQuery控制图片的hover效果(smartRollover.js)
2012/03/18 Javascript
js数组的操作详解
2013/03/27 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
理解javascript异步编程
2016/01/27 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python入门篇之编程习惯与特点
2014/10/17 Python
Python正则表达式指南 推荐
2018/10/09 Python
Python使用folium excel绘制point
2019/01/03 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python os.fork() 循环输出方法
2019/08/08 Python
python实现视频读取和转化图片
2019/12/10 Python
浅谈python 中的 type(), dtype(), astype()的区别
2020/04/09 Python
Python matplotlib实时画图案例
2020/04/23 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
车辆委托书范本
2014/10/05 职场文书
世界遗产的导游词
2015/02/13 职场文书
班主任自我评价范文
2015/03/11 职场文书
2016年情人节广告语
2016/01/28 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
Pandas-DataFrame知识点汇总
2022/03/16 Python