详解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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
详解微信UnionID作用
May 15 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 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+mysql实现无限分类实例详解
2015/01/15 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
重定向实现代码
2006/11/20 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
2014/10/07 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
2018/10/09 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
python删除本地夹里重复文件的方法
2020/11/19 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
详解Python传入参数的几种方法
2019/05/16 Python
Numpy之reshape()使用详解
2019/12/26 Python
Django REST framwork的权限验证实例
2020/04/02 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
单位介绍信范文
2014/01/18 职场文书
奥利奥广告词
2014/03/20 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
材料采购员岗位职责
2015/04/03 职场文书
新娘婚礼致辞
2015/07/27 职场文书
思想工作总结范文
2015/08/12 职场文书
优质护理服务心得体会
2016/01/22 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript
Docker下安装Oracle19c
2022/04/13 Servers
python 镜像环境搭建总结
2022/09/23 Python