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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
jQuery实现的右下角广告窗体跟随效果示例
Sep 16 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
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开发中四种查询返回结果分析
2011/01/02 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
解决Vue+Element ui开发中碰到的IE问题
2018/09/03 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Vue 技巧之控制父类的 slot
2020/02/24 Javascript
JS script脚本中async和defer区别详解
2020/06/24 Javascript
Python中处理时间的几种方法小结
2015/04/09 Python
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
ORACLE第二个十问
2013/12/14 面试题
财务信息服务专业自荐书范文
2014/02/08 职场文书
租房协议书
2014/09/12 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python