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实现的水平和垂直居中的div窗口
Aug 08 Javascript
node.js中的http.request方法使用说明
Dec 14 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
JS实现DIV高度自适应窗口示例
Feb 16 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
JavaScript 实现页面滚动动画
Apr 24 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实现根据字符串生成对应数组的方法
2014/09/22 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
jQuery实现动画效果的实例代码
2013/05/07 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
js css自定义分页效果
2017/02/24 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python饼状图的绘制实例
2019/01/15 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python 从attribute到property详解
2020/03/05 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
几个数据库方面的面试题
2016/07/01 面试题
人事专员岗位职责范本
2014/03/04 职场文书
协议书的格式
2014/04/23 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
Python实现数据的序列化操作详解
2022/07/07 Python