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 相关文章推荐
谷歌浏览器 insertCell与appendChild的区别
Feb 12 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
Mar 28 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 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的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
Extjs实现进度条的两种便捷方式
2013/09/26 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
javascript实现数独解法
2015/03/14 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
js中获取jsp表单中radio类型的值简单实例
2016/08/15 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
JS在if中的强制类型转换方式
2018/07/15 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
vue transition 在子组件中失效的解决
2019/11/12 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Ubuntu安装Jupyter Notebook教程
2017/10/18 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
八项规定对照检查材料
2014/08/31 职场文书
创新社会管理心得体会
2014/09/12 职场文书
主持人开幕词
2015/01/29 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
2015年教研组工作总结
2015/05/04 职场文书
回复函范文
2015/07/14 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android