深刻理解 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

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章