详解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对象[0]是什么含义?
Jul 31 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
javaScript中push函数用法实例分析
Jun 08 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
js判断节假日实例代码
Dec 27 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
用vue 实现手机触屏滑动功能
May 28 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php实现天干地支计算器示例
2014/03/14 PHP
thinkphp普通查询与表达式查询实例分析
2014/11/24 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vuex存储token示例
2019/11/11 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python文件读取的3种方法及路径转义
2015/06/21 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
详解Python中的正则表达式
2018/07/08 Python
Pygame的程序开始示例代码
2020/05/07 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
工作自我评价分享
2013/12/01 职场文书
运动会解说词200字
2014/02/06 职场文书
运动会800米加油稿
2014/02/22 职场文书
公司承诺函范文
2015/01/21 职场文书
公司财务人员岗位职责
2015/04/14 职场文书
导游词之扬州大明寺
2019/10/09 职场文书