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 相关文章推荐
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
关于vue的列表图片选中打钩操作
Sep 09 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Aptana调试javascript图解教程
2009/11/30 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
2014/08/07 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python中黄金分割法实现方法
2015/05/06 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python用opencv完成图像分割并进行目标物的提取
2020/05/25 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
建筑工程毕业生自我鉴定
2014/01/14 职场文书
《望洞庭》教学反思
2014/02/16 职场文书
团队精神的演讲稿
2014/05/14 职场文书
档案工作汇报材料
2014/08/21 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
小型婚礼主持词
2015/06/30 职场文书
信息技术课教学反思
2016/02/23 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫