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:void(0)的真正含义实例分析
Aug 20 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
three.js实现圆柱体
Dec 30 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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
提高PHP编程效率的53个要点(经验小结)
2010/09/04 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
php简单处理XML数据的方法示例
2017/05/19 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript 常用关键字列表集合
2007/12/04 Javascript
30个最好的jQuery 灯箱插件分享
2011/04/25 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
javascript中的面向对象
2017/03/30 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
AngularJS实现注册表单验证功能
2017/10/16 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue组件实践之可搜索下拉框功能
2018/11/25 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python协程用法实例分析
2015/06/04 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
pandas 层次化索引的实现方法
2019/07/06 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Python脚本调试工具安装过程
2021/01/11 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
老师自我鉴定范文
2013/12/25 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书