详解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代码
Sep 22 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
Use Word to Search for Files
2007/06/15 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
vue2.0安装style/css loader的方法
2018/03/14 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
python访问类中docstring注释的实现方法
2015/05/04 Python
对Python中range()函数和list的比较
2018/04/19 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python Merge函数原理及用法解析
2020/09/16 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
大学生毕业求职的自我评价
2013/09/29 职场文书
岗位职责定义及内容
2013/11/08 职场文书
出纳担保书范文
2014/04/02 职场文书
教师评语大全
2014/04/28 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2016庆祝教师节新闻稿
2015/11/25 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫