JavaScript中的null和undefined解析


Posted in Javascript onApril 14, 2012

在JavaScript开发中,被人问到:null与undefined到底有啥区别?

一时间不好回答,特别是undefined,因为这涉及到undefined的实现原理。于是,细想之后,写下本文,请各位大侠拍砖。

总所周知:null == undefined

但是:null !== undefined

那么这两者到底有啥区别呢?

请听俺娓娓道来...

null

这是一个对象,但是为空。因为是对象,所以 typeof null 返回 'object' 。

null 是 JavaScript 保留关键字。

null 参与数值运算时其值会自动转换为 0 ,因此,下列表达式计算后会得到正确的数值:

表达式:123 + null 结果值:123

表达式:123 * null 结果值:0

undefined

undefined是全局对象(window)的一个特殊属性,其值是未定义的。但 typeof undefined 返回 'undefined' 。

虽然undefined是有特殊含义的,但它确实是一个属性,而且是全局对象(window)的属性。请看下面的代码:

alert('undefined' in window); //输出:true
alert(undefined in window); //输出:true
var anObj = {};
alert('undefined' in anObj); //输出:false

从中可以看出,undefined是window对象的一个属性,但却不是anObj对象的一个属性。

注意:尽管undefined是有特殊含义的属性,但却不是JavaScript的保留关键字。

undefined参与任何数值计算时,其结果一定是NaN。

随便说一下,NaN是全局对象(window)的另一个特殊属性,Infinity也是。这些特殊属性都不是JavaScript的保留关键字!

提高undefined性能

当我们在程序中使用undefined值时,实际上使用的是window对象的undefined属性。

同样,当我们定义一个变量但未赋予其初始值,例如:

var aValue;

这时,JavaScript在所谓的预编译时会将其初始值设置为对window.undefined属性的引用,

于是,当我们将一个变量或值与undefined比较时,实际上是与window对象的undefined属性比较。这个比较过程中,JavaScript会搜索window对象名叫‘undefined'的属性,然后再比较两个操作数的引用指针是否相同。

由于window对象的属性值是非常多的,在每一次与undefined的比较中,搜索window对象的undefined属性都会花费时间。在需要频繁与undefined进行比较的函数中,这可能会是一个性能问题点。因此,在这种情况下,我们可以自行定义一个局部的undefined变量,来加快对undefined的比较速度。例如:

function anyFunc()
{
var undefined; //自定义局部undefined变量

if(x == undefined) //作用域上的引用比较

while(y != undefined) //作用域上的引用比较

};

其中,定义undefined局部变量时,其初始值会是对window.undefined属性值的引用。新定义的局部undefined变量存在与该函数的作用域上。在随后的比较操作中,JavaScript代码的书写方式没有任何的改变,但比较速度却很快。因为作用域上的变量数量会远远少于window对象的属性,搜索变量的速度会极大提高。

这就是许多前端JS框架为什么常常要自己定义一个局部undefined变量的原因!

Javascript 相关文章推荐
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 #Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 #Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 #Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 #Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 #Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 #Javascript
window.parent与window.openner区别介绍
Apr 12 #Javascript
You might like
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
2014/10/29 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
深入理解Python分布式爬虫原理
2017/11/23 Python
对python的输出和输出格式详解
2018/12/08 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Django logging配置及使用详解
2019/07/23 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
《少年王勃》教学反思
2014/04/27 职场文书
平安工地建设方案
2014/05/06 职场文书
爱牙日活动总结
2014/08/29 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
自愿离婚协议书2015
2015/01/26 职场文书
致运动员赞词
2015/07/22 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL
Go timer如何调度
2021/06/09 Golang
如何正确理解python装饰器
2021/06/15 Python
JS高级程序设计之class继承重点详解
2022/07/07 Javascript