跟我学习javascript的undefined与null


Posted in Javascript onNovember 17, 2015

当讨论JavaScript中的原始数据类型时,大多数人都知道从String、Number到Boolean的基本知识。这些原始类型相当简单,行为符合常识。但是,本文将更多关注独特的原始数据类型Null和Undefined,是什么让它们如此相似,却又似是而非。

一、理解null和undefined

在JavaScript中,null是字面量同时也是语言中的关键字,用来表示无法识别的对象值。换句话说,这用来表示“无值(no value)”,但你可以决定什么时候得到期望值。

虽然相似,undefined实际上代表了不存在的值(non-existence of a value),也即你有东西丢失了。两者都是完全不可变的,没有属性和方法,也不能给其属性赋值。事实上, 当你试图访问或定义null 与 undefined的一个属性将会引发一个类型错误(TypeError)。

没有值代表的布尔值是false,这意味着他们在条件上下文中会被被计算为false,如if语句。使用相等操作符(= =)比较这两个值和其他false值,他们并不等于除了自己:

null == 0; // false 
undefined == ""; // false 
null == false; // false 
undefined == false; // false 
null == undefined; // true

尽管如此,和其他相似之处,但null和undefined并不是等价的。每个作为其独特的类型的唯一成员,undefined是Undefined类型和null是Object类型。使用全等操作符(===)比较这两个值,这要求类型和值都相等,下面证明这一点:

null === undefined; //false
typeof null; //"object"
typeof undefined; //"undefined"

上面说明:null 这是一个对象,但是为空。而且 null 是 JavaScript 保留关键字。
另外null 参与数值运算时其值会自动转换为 0 ,因此,下列表达式计算后会得到正确的数值:

123 + null; //123 
123 * null;
 //0

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

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

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

  • 尽管undefined是有特殊含义的属性,但却不是JavaScript的保留关键字。 undefined参与任何数值计算时,其结果一定是NaN。 随便说一下,NaN是全局对象(window)的另一个特殊属性,Infinity也是。这些特殊属性都不是JavaScript的保留关键字!
  • 验证一个值或者一个对象为null时,需要用“===” 来判定,若只用“==”,则无法判定是null 还是 undefined.

二、产生Undefined情况
有许多的方法产生一个undefined值的代码。它通常遇到当试图访问一个不存在的值时。在这种情况下,在JavaScript这种动态的弱类型语言中,只会默认返回一个undefined值,而不是上升为一个错误。

1、任何声明变量时没有提供一个初始值,都会有一个为undefined的默认值:

var foo; // 默认值为 undefined

2、当试图访问一个不存在的对象属性或数组项时,返回一个undefined值:

var array = [1, 2, 3]; 
var foo = array.foo; // foo 属性不存在, 返回 undefined 
var item = array[5]; // 数组中没有索引为5的项,返回 undefined

3、如果省略了函数的返回语句, 或者return语句未带任何参数返回undefined:

var value = (function(){

})(); // 返回 undefined 
var value1 = (function(){
  return;
})(); // 返回 undefined

4、调用函数时,应该提供的参数没有提供,该参数等于undefined

function f(x){
  console.log(x)
}
f(); // undefined

最后,undefined是一个预定义的全局变量(不像null关键字)初始化为undefined值:

'undefined' in window; // true

ECMAScript 5中,这个变量是只读的,以前并非如此。

三、null的用例

null的用例是使他与众不同的主要方面,因为不像undefined,null被认为是更有用。这正是为什么typeof操作符作用于null值 时返回“object”。最初的理由是,现在仍然是,通常用作一个空引用一个空对象的预期,就像一个占位符。typeof的这种行为已经被确认为一个错 误,虽然提出了修正,出于后兼容的目的,这一点已经保持不变。

一般来说,如果你需要给一个变量或属性指定一个不变值,将它传递给一个函数,或者从一个函数返回null,null几乎总是最好的选择。简而言之,JavaScript使用undefined并且程序员应该使用null。

null的另一个可行的用例,也被认为是良好的实践是一个显式指定变量为无效(object= null)当一个引用不再是必需的。通过分配null值,有效地清除引用,并假设对象没有引用其他代码,指定垃圾收集,确保回收内存。

四、提高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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
JS实现滑动插件
Jan 15 Javascript
跟我学习javascript的arguments对象
Nov 16 #Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 #Javascript
js实现获取div坐标的方法
Nov 16 #Javascript
跟我学习javascript的闭包
Nov 16 #Javascript
jQuery链式操作实例分析
Nov 16 #Javascript
javascript伸缩型菜单实现代码
Nov 16 #Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
Nov 16 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php求数组全排列,元素所有组合的方法
2016/05/05 PHP
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
2013/05/30 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
2018/02/23 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
对python调用RPC接口的实例详解
2019/01/03 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
介绍一下grep命令的使用
2015/06/12 面试题
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
房地产融资计划书
2014/01/10 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers