详解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 相关文章推荐
javascript第一课
Feb 27 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
Nov 24 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
小程序接入腾讯位置服务的详细流程
Mar 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
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
python 切片和range()用法说明
2013/03/24 Python
Python3导入CSV文件的实例(跟Python2有些许的不同)
2018/06/22 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
护理职业生涯规划书
2014/01/24 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
高三家长寄语
2014/04/03 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
起诉意见书范文
2015/05/19 职场文书