详解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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
Nov 18 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
Apr 19 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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制作的简单验证码识别代码
2016/01/26 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
理解JSON:3分钟课程
2011/10/28 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
python编程嵌套函数实例代码
2018/02/11 Python
python3.x上post发送json数据
2018/03/04 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
基于python实现学生信息管理系统
2019/11/22 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
Tensorflow: 从checkpoint文件中读取tensor方式
2020/02/10 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
JPA的优势都有哪些
2013/07/04 面试题
读书心得体会
2013/12/28 职场文书
项目经理聘任书
2014/03/29 职场文书
2014年药店工作总结
2014/11/20 职场文书
2014年村委会工作总结
2014/11/24 职场文书
物业工程部经理岗位职责
2015/04/09 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js