详解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对象所有属性和方法的函数
Oct 16 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
Javascript倒计时代码
Aug 12 Javascript
gridpanel动态加载数据的实例代码
Jul 18 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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与已存在的Java应用程序集成
2006/10/09 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
制作特殊字的脚本
2006/06/26 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python中zip()方法应用实例分析
2016/04/16 Python
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python字典对象实现原理详解
2019/07/01 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
如何利用Python写个坦克大战
2020/11/18 Python
html5开发之viewport使用
2013/10/17 HTML / CSS
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
金智子午JAVA面试题
2015/09/04 面试题
品恩科技软件测试面试题
2014/10/26 面试题
党员学习十八大感想
2014/01/17 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
工作后的感想
2015/08/07 职场文书
手把手教你导入Go语言第三方库
2021/08/04 Golang
阿里云日志过滤器配置日志服务
2022/04/09 Servers
vue 数字翻牌器动态加载数据
2022/04/20 Vue.js
delete in子查询不走索引问题分析
2022/07/07 MySQL