深刻理解 Undefined

原文： http://davidshariff.com/blog/...
翻译：疯狂的技术宅

---

本文首发微信公众号：jingchengyideng
欢迎关注，天天都给你推送新鲜的前端技术文章

---

Undefined 这个概念听起来很简单，不过你知道应该怎样检查JavaScript中的变量或属性是否真的存在吗？ 作这件事最好的方法是什么？ 咱们如何涵盖全部的边界值？ 要回答这些问题，首先让咱们来看看究竟什么是undefined......

undefined概述

变量的值被赋予一个类型，JavaScript中有几个内置的本地类型：

1. Undefined
2. Null
3. Boolean
4. String
5. Number
6. Object
7. Reference
8. etc…

首先看第一个，内置的Undefined类型只能有一个值，它称为undefined。 这是一个原始值，只要声明了变量，就会为其分配此undefined值，直到您以编程的手段为其分配不一样的值。

此外，每当函数完成执行并返回一个没有给定的值时，它默认返回undefined。

var foo,
    bar = (function() {
        // do some stuff 
    }()),
    baz = (function() {
        var hello;
        return hello;
    }());

typeof foo; // undefined
typeof bar; // undefined
typeof baz; // undefined

所以，当声明一个变量但还未赋值时，它将被赋予undefined值。 咱们还应该注意的是：undefined自己是一个在全局范围内可用的变量/属性，它的值也是undefined。

typeof undefined; // undefined

var foo;

foo === undefined; // true

可是，全局变量undefined并非保留字，所以它能够被从新定义。 幸运的是，从ECMA 5开始，就不容许从新定义undefined了，可是在之前的版本和旧版浏览器中，能够执行如下操做：

typeof undefined; // undefined
undefined = 99;
typeof undefined; // number

null到底表明了什么？

先看下面的代码：

null == undefined // true
null !== undefined // true

不少人对此都感到困惑，实际上很简单。 null和undefined之间惟一真正的关系是：它们在类型强制过程当中都判断为false。

之因此因此 null == undefined // true 是由于 == 没有执行严格的比较，由于在比较类型时使用 !== 更严格。 每当您把 null 看做是一个值时，它会始终以编程方式进行指定，而且在默认状况下从不设置。

访问对象的属性

当您尝试使用对象上一个不存在的属性时，也会获得undefined，若是您把不存在的属性做为函数使用有时会引起错误。

var foo = {};

foo.bar; // undefined
foo.bar(); // TypeError

若是您想分辨“有未定义值的属性”和“根本不存在的属性”这二者，应该怎么作呢？

使用typeof 或者 ===都会给你一个undefined的值。

使用in运算符可以检查对象中是否存在某个属性：

var foo = {};

// undefined (这样很差，bar从未在window对象中被声明过)
typeof foo.bar;

// false (若是您不关心原型链，这样用)
'bar' in foo;

// false (若是你关心原型链，就这样用)
foo.hasOwnProperty('bar');

应该用typeof仍是in/hasOwnProperty？

这很显然。通常来讲，若是要测试是一个属性否存在，那么就用 in/hasOwnProperty，若是要检查属性或变量的值，则用 typeof。

经过例子进行总结

检查变量是否存在：

if (typeof foo !== 'undefined') {}

检查对象上的属性是否存在，不管是否已经为它分配了值：

// 存在于对象上，同时也检查原型
if ('foo' in bar) {}

// 直接存在于对象上，不检查原型
if (bar.hasOwnProperty('foo')) {}

检查对象上是否存在属性，而且属性具备值集（真值或假）

var bar = {
    foo: false
}; 

if ('foo' in bar && typeof bar.foo !== 'undefined'){ 
    // bar.foo存在，而且它包含以编程方式分配的值
}

---

本文首发微信公众号：jingchengyideng

欢迎扫描二维码关注公众号，天天都给你推送新鲜的前端技术文章