Javascript类型系统之undefined和null浅析


Posted in Javascript onJuly 13, 2016

前面的话

一般的程序语言,表示空的只有null,但javascript的设计者Brendan Eich却设计了一个undefined,这无疑增加了程序复杂度,但这样做也是有一定原因的。本文将详细介绍javascript中的undefined和null

历史原因

1995年JavaScript诞生时,最初像Java一样,只设置了null作为表示”无”的值。根据C语言的传统,null被设计成可以自动转为0

但是,JavaScript的设计者Brendan Eich,觉得这样做还不够,有两个原因。首先,null像在Java里一样,被当成一个对象。但是,JavaScript的值分成原始类型和对象类型两大类,Brendan Eich觉得表示”无”的值最好不是对象。其次,JavaScript的最初版本没有包括错误处理机制,发生数据类型不匹配时,往往是自动转换类型或者默默地失败。Brendan Eich觉得,如果null自动转为0,很不容易发现错误

因此,Brendan Eich又设计了一个undefined。他是这样区分的:null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN

但是,目前null和undefined基本是同义的,都是原始类型,且只有一些细微的差别

undefined

Undefined类型只有一个值,就是undefined。当声明的变量未初始化时,该变量的默认值是undefined。所以一般地,undefined表示变量没有初始化

var test;//undefined
console.log(test == undefined);//true
var test = undefined;//undefined

对于尚未声明过的变量只能执行一项操作,使用typeof操作符检测其数据类型,但严格模式下会导致错误

typeof(test);//undefined

【出现场景】

【1】已声明未赋值的变量

【2】获取对象不存在的属性

【3】无返回值的函数的执行结果

【4】函数的参数没有传入

【5】void(expression)

var i;
console.log(i);//undefined
var o = {};
console.log(o.p);//undefined
function f(){};
console.log(f());//undefined
function f(x){return x;}
console.log(f());//undefined
console.log(void(0));//undefined

【类型转换】

Boolean(undefined):  false
Number(undefined):  NaN
String(undefined):'undefined'

null

Null类型只有一个值,就是null。null是javascript语言的关键字,它表示一个特殊值,常用来描述"空值"

逻辑角度看,null值表示一个空对象指针

[注意]null是空对象指针,而[]是空数组,{}是空对象,三者不相同

console.log(typeof null);//'object'

尽管null和undefined是不同的,但它们都表示"值的空缺",null表示"空值",undefined表示"未定义"。两者往往可以互换。判断相等运算符==认为两者是相等的

console.log(null == undefined);//true

实际上,因为undefined和null不是构造器类型,所以它们没有任何的属性和方法,使用.和[]来存取这两个值的成员或方法都会产生一个类型错误

【类型转换】

Boolean(null): false
Number(null):
 0
String(null): 
 'null'

下面给大家介绍javascript中null和undefined的区别

undefined表示变量声明但未初始化时的值,null表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null值表示一个空对象指针。

JavaScript(ECMAScript标准)里共有5种基本类型:Undefined, Null, Boolean, Number, String,和一种复杂类型Object。可以看到null和undefined分属不同的类型,未初始化定义的值用typeof检测出来是"undefined"(字符串),而null值用typeof检测出来是"object"(字符串)。

任何时候都不建议显式的设置一个变量为undefined,但是如果保存对象的变量还没有真正保存对象,应该设置成null。
实际上,undefined值是派生自null值的,ECMAScript标准规定对二者进行相等性测试要返回true,即

alert(null==undefined); // true
Javascript 相关文章推荐
浅谈Javascript实现继承的方法
Jul 06 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
jquery dialog获取焦点的方法
Feb 09 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
vue.js项目打包上线的图文教程
Nov 16 Javascript
微信小程序实现列表下拉刷新上拉加载
Jul 29 Javascript
原生js实现随机点名
Jul 05 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 #Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 #Javascript
javascript类型系统——undefined和null全面了解
Jul 13 #Javascript
You might like
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
2017/03/21 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
React Native如何消除启动时白屏的方法
2017/08/08 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JS实现小星星特效
2019/12/24 Javascript
python自动发送邮件脚本
2018/06/20 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
python3 pygame实现接小球游戏
2019/05/14 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python面向对象之Web静态服务器
2019/09/03 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python中有几个关键字
2020/06/04 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
优秀大学生的自我评价
2014/01/16 职场文书
法定代表人授权委托书
2014/04/04 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
户外亲子活动总结
2015/05/08 职场文书
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
python前后端自定义分页器
2022/04/13 Python