详解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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
node.js事件轮询机制原理知识点
Dec 22 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 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
安装APACHE
2007/01/15 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
PHP设计模式之建造者模式定义与用法简单示例
2018/08/13 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
2012/09/19 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
[00:59]PWL开团时刻DAY7——我在赶
2020/11/06 DOTA
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
详解python 内存优化
2020/08/17 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
海南地接欢迎词
2014/01/14 职场文书
大学生自我鉴定书
2014/03/24 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
一般纳税人申请报告
2015/05/18 职场文书
python turtle绘图命令及案例
2021/11/23 Python