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 相关文章推荐
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
javascript下string.format函数补充
Aug 24 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
Vue动态获取width的方法
Aug 22 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
python文件操作之目录遍历实例分析
2015/05/20 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
python3实现点餐系统
2019/01/24 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python程序中的线程操作 concurrent模块使用详解
2019/09/23 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
应届生个人求职信模板
2013/11/26 职场文书
联谊活动策划书
2014/01/26 职场文书
2013年军训通讯稿
2014/02/05 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
葬礼司仪主持词
2014/03/31 职场文书
北京英语导游词
2015/02/12 职场文书
奔腾年代观后感
2015/06/09 职场文书
仰望星空观后感
2015/06/10 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
MySQL插入数据与查询数据
2022/03/25 MySQL
PostgreSQL怎么创建分区表详解
2022/06/25 PostgreSQL