javascript中undefined与null的区别


Posted in Javascript onAugust 16, 2015

大多数计算机语言,有且仅有一个表示"无"的值,比如,C语言的NULL,Java语言的null,Python语言的None,Ruby语言的nil。

有点奇怪的是,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里一样,被当成一个对象。但是,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

下面做个小小的总结

null是JavaScript关键字,表示非对象。

undefined表示没有值,说明这个值不存在或是没有初始化。

相同点 不同点
自有类型唯一值 null是对象,undefined是保留字
没有属性和方法 null在参与数学运算中转化成0,undefined在数学运算中无法转化或是转化成NaN
==认为相等,===认为不等 null !==undefined //true
都是假值,在布尔值变量表示值相同 null是空对象,undefined是window的属性(但是不是对象属性)
  alert(typeof null) // object ; alert(typeof undefined) // undefined ;
Javascript 相关文章推荐
建议大家看下JavaScript重要知识更新
Jul 08 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
swtich/if...else的替代语句
Aug 16 #Javascript
javascript数组去重的六种方法汇总
Aug 16 #Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 #Javascript
js时钟翻牌效果实现代码分享
Jul 31 #Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 #Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 #Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 #Javascript
You might like
模拟xcopy的函数
2006/10/09 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
php中autoload的用法总结
2013/11/08 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php获取远程文件内容的函数
2015/11/02 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
护士先进个人总结
2015/02/13 职场文书
客户答谢会致辞
2015/07/30 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
Pygame Time时间控制的具体使用详解
2021/11/17 Python