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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
Vue实现验证码功能
Dec 03 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
非常好的php目录导航文件代码
2006/10/09 PHP
PHP 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
PHP获取文件行数的方法
2015/06/10 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
浅谈js中变量初始化
2015/02/03 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
js的三种继承方式详解
2017/01/21 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
小程序点击图片实现png转jpg
2019/10/22 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python实现验证码识别
2020/06/15 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
教师廉洁自律承诺书
2014/05/26 职场文书
婚前协议书范本
2014/10/27 职场文书
烈士陵园观后感
2015/06/08 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
初中毕业感言300字
2015/07/31 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python