JavaScript檢測原始值、引用值、屬性

上週寫過一篇讀書筆記《編寫可維護的JavaScript》之編程實踐，其中 第8章避免『空比較』是博主在工作中遇坑較多的雷區，所以特此把該章節重新整理分享，希望大家不再坑隊友(＞﹏＜)。

在 JavaScript 中，我們常常會看到這樣的代碼：變量與null的比較（這種用法很有問題），用來判斷變量是否被賦予了一個合理的值。比如：

var Controller = {
    process: function(items) {
        if (items !== null) { // 不好的寫法
            items.sort();
            items.forEach(function(item) {
                // 執行一些邏輯
            });
        }
    }
}

在這段代碼中，process()方法顯然希望items是一個數組，因爲我們看到items擁有sort()和forEach()。這段代碼的意圖非常明顯：如果參數items不是一個組數，則停止接下來的操作。這種寫法的問題在於，和null的比較並不能真正避免錯誤的發生。items的值可以是1，也可以是是字符串，甚至可以是任意對象。這些值都和null不相等，進而會導致process()方法一旦執行到sort()時就會出錯。

僅僅和null比較並不能提供足夠的信息來判斷後續代碼的執行是否真的安全。好在 JavaScript 爲我們提供了很多種方法來檢測變量的真實值。

檢測原始值

在 JavaScript 中有5種原始類型（也稱爲簡單數據類型）： String、Number、Boolean、Undefined和Null。如果你希望一個值是String、Number、Boolean或Undefined，最佳選擇是使用typeof運算符，它會返回一個表示類型的字符串。

對於字符串，typeof返回"string"。
對於數字，typeof返回"number"。
對於布爾值，typeof返回"boolean"。
對於undefined，typeof返回"undefined"。

typeof的基本語法是：typeof variable，你還可以這樣用：typeof(variable)，儘管這是合法的 JavaScript 語法，這種用法讓typeof看起來像一個函數而非運算符。鑑於此，我們更推薦無括號的寫法。

使用typeof來檢測這4種原始類型是非常安全的做法。來看下面這些例子。

// 檢測"String"
if (typeof name === "string") {
    anotherName = name.substring(3);
}

// 檢測"Number"
if (typeof count === "number") {
    updateCount(count);
}

// 檢測"Boolean"
if (typeof found === "boolean" && found) {
    message("Found!");
}

// 檢測"Undefined"
if (typeof MyApp === "undefined") {
    MyApp = {
        // 其他代碼
    };
}

typeof運算符的獨特之處在於，將其用於一個未聲明的變量也不會報錯。未定義的變量和值爲undefined的變量通過typeof都將返回"undefined"。

最後一個原始類型null，通過typeof將返回"object"，這看上去很怪異，被認爲是標準規範的嚴重 bug，因此在編程時要 杜絕使用typeof來檢測null的類型。

console.log(typeof null);   // "object"

簡單地和null進行比較通常不會包含足夠的信息以判斷值的類型是否合法，所以null一般不應用於檢測語句。

但有一個例外，如果所期望的值真的是null，則可以直接和null進行比較。例如：

// 如果你需要檢測 null，則使用這種方法
var element = document.getElementById("my-div");
if (element !== null) {
    element.className = "found";
}

如果 DOM 元素不存在，則通過document.getElementById()得到的值爲null。這個方法要麼返回一個節點，要麼返回null。由於這時null是可預見的一種輸出，則可以用恆等運算符===或非恆等運算符!==來檢測返回結果。

typeof運算符的返回值除了上述提到的string、number、boolean、undefined和object之外，還有function。從技術的角度來講，函數在 JavaScript 中也是對象，不是一種數據類型。然而，函數也確實有一些特殊的屬性，因此通過typeof運算符來區分函數和其他對象是有必要的。這一特性將在後面 檢測函數 中用到。

檢測引用值

在 JavaScript 中除了原始值之外的都是引用值（也稱爲對象），常用的引用類型有：Object、Array、Date和RegExp，這些引用類型都是 JavaScript 的內置對象。typeof運算符在判斷這些引用類型時全都返回"object"。

console.log(typeof {});             // "object"
console.log(typeof []);             // "object"
console.log(typeof new Date());     // "object"
console.log(typeof new RegExp());   // "object"

檢測某個引用值類型的最好方法是使用instanceof運算符，instanceof的基本語法是：

value instanceof constructor

// 檢測日期
if (value instanceof Date) {
    console.log(value.getFullYear);
}

// 檢測 Error
if (value instanceof Error) {
    throw value;
}

// 檢測正則表達式
if (value instanceof RegExp) {
    if (value.test(anotherValue)) {
        console.log("Matches");
    }
}

instanceof的一個有意思的特性是它不僅檢測構造這個對象的構造器，還檢測原型鏈。原型鏈包含了很多信息，包括定義對象所採用的繼承模式。比如，默認情況下，每個對象都繼承自Object，因此每個對象的value instanceof Object都會返回ture。比如：

var now = new Date();
console.log(now instanceof Object); // ture
console.log(now instanceof Date);   // ture

instanceof運算符也可以檢測自定義的類型，比如：

function Person(name){
    this.name = name;
}
var me = new Person("Nicholas");
console.log(me instanceof Object);  // ture
console.log(me instanceof Person);  // ture

這段示例代碼中創建了Person類型。變量me是Person的實例，因此me instanceof Person是true。上文也提到，所有的對象都被認爲是Object的實例，因此me instanceof Object也是ture。

在 JavaScript 中檢測 內置類型 和 自定義類型 時，最好的做法就是使用instanceof運算符，這也是唯一的方法。

但有一個嚴重的限制，假設兩個瀏覽器幀（frame）裏都有構造函數Person，幀A中的Person實例frameAPersonInstance傳入到幀B中，則會有如下結果：

console.log(frameAPersonInstance instanceof frameAPerson)    // ture
console.log(frameAPersonInstance instanceof frameBPerson)    // false

儘管兩個Person的定義是完全一樣的，但在不同幀（frame）裏，他們被認爲是不同類型。有兩個非常重要的內置類型也有這個問題：Array和Function，所以檢測它們一般不使用instanceof。

檢測函數

從技術上講，JavaScript 中的函數是引用類型，同樣存在Function構造函數，每個函數都是其實例，比如：

function myFunc() {}

// 不好的寫法
console.log(myFunc instanceof Function); // true

然而，這個方法亦不能跨幀（frame）使用，因爲每個幀都有各自的Function構造函數，好在typeof運算符也是可以用於函數的，返回"function"。

function myFunc() {}

// 好的寫法
console.log(typeof myFunc === "function"); // true

檢測函數最好的方法是使用typeof，因爲他可以跨幀（frame）使用。

用typeof來檢測函數有一個限制。在 IE 8 和更早版本的 IE 瀏覽器中，使用typeof來檢測 DOM 節點中的函數都返回"object"而不是"function"。比如：

// IE8 及更早版本的IE
console.log(typeof document.createElement);         // "object"
console.log(typeof document.getElementById);        // "object"
console.log(typeof document.getElementByTagName);   // "object"

之所以出現這種怪異的現象是因爲瀏覽器對 DOM 的實現有差異。簡言之，這些早版本的 IE 並沒有將 DOM 實現爲內置的 JavaScript 方法，導致內置typeof運算符將這些函數識別爲對象。因爲 DOM 是有明確定義的，瞭解到對象成員如果存在則意味着它是一個方法，開發者往往通過in運算符來檢測 DOM 的方法，比如：

// 檢測 DOM 方法
if ("querySelectorAll" in document) {
    var images = document.querySelectorAll("img");
}

這段代碼檢查querySelectorAll是否定義在document中，如果是，則使用這個方法。儘管不是最理想的方法，如果想在 IE 8 及更早瀏覽器中檢測 DOM 方法是否存在，這是最安全的做法。在其他所有的情形中，typeof運算符是檢測 JavaScript 函數的最佳選擇。

檢測數組

JavaScript 中最古老的跨域問題之一就是在幀（frame）之間來回傳遞數組。開發者很快發現instanceof Array在此場景中不能返回正確的結果。正如上文提到的，每個幀都有各自的Array構造函數，因此一個幀中的實例在另外一個幀裏不會被識別。

關於如何在 JavaScript 中檢測數組類型已經有狠多研究了，最終 Kangax 給出了一種優雅的解決方案：

function isArray(value) {
    return Object.prototype.toString.call(value) === "[object Array]";
}

Kangax 發現調用某個值的內置toString()方法在所有瀏覽器中都會返回標準的字符串結果。對於數組來說，返回的字符串爲"[object Array]"，也不用考慮數組實例實在哪個幀（frame）中被構造出來的。這種方法在識別內置對象時往往十分有用，但對於自定義對象請不要用這種方法。

ECMAScript5 將Array.isArray()正式引入 JavaScript。唯一的目的就是準確地檢測一個值是否爲數組。同 Kangax 的函數一樣，Array.isArray()也可以檢測跨幀（frame）傳遞的值，因此很多 JavaScript 類庫目前都類似地實現了這個方法。

function isArray(value) {
    if (typeof Array.isArray === "function") {
        return Array.isArray(value);
    } else {
        return Object.prototype.toString.call(value) === "[object Array]";
    }
}

IE 9+、FireFox 4+、Safari 5+、Opera 10.5+、Chrome 都實現了Array.isArray()方法。

檢測屬性

另外一種用到null（以及undefined）的場景是當檢測一個屬性是否在對象中存在時，比如：

// 不好的寫法：檢測假值
if (object[propertyName]) {
    // 一些代碼
}

// 不好的寫法：和null相比較
if (object[propertyName] != null) {
    // 一些代碼
}

// 不好的寫法：和undefined相比較
if (object[propertyName] != undefined) {
    // 一些代碼
}

上面這段代碼裏的每個判斷，實際上是通過給定的名字來檢查屬性的值，而並非判斷給定的名字所指的屬性是否存在。在第一個判斷中，當屬性值爲假值時結果會出錯，比如：0、""（空字符串）、false、null和undefined，畢竟這些都是屬性的合法值。

判斷屬性是否存在的最好的方法是使用in運算符。in運算符僅僅會簡單地判斷屬性是否存在，而不去讀屬性的值，如果實例對象的屬性存在、或者繼承自對象的原型，in運算符都會返回true。比如：

var object = {
    count: 0,
    related: null
};

// 好的寫法
if ("count" in object) {
    // 這裏的代碼會執行
}

// 不好的寫法：檢測假值
if (object["count"]) {
    // 這裏的代碼不會執行
}

// 好的寫法
if ("related" in object) {
    // 這裏的代碼會執行
}

// 不好的寫法，檢測是否爲
if (object["related"] != null) {
    // 這裏的代碼不會執行
}

如果你只想檢查實例對象的某個屬性是否存在，則使用hasOwnProperty()方法。所有繼承自Object的 JavaScript 對象都有這個方法，如果實例中存在這個屬性則返回true（如果這個屬性只存在於原型裏，則返回false）。需要注意的是，在 IE 8 以及更早版本的 IE 中，DOM 對象並非繼承自 Object，因此也不包含這個方法。也就是說，你在調用 DOM 對象的hasOwnProperty()方法之前應當先檢測其是否存在。

// 對於所有非 DOM 對象來說，這是好的寫法
if (object.hasOwnProperty("related")) {
    // 執行這裏的代碼會
}

// 如果你不確定是否爲 DOM 對象，則這樣來寫
if ("hasOwnProperty" in object && object.hasOwnProperty("related")) {
    // 執行這裏的代碼會
}

因爲存在 IE 8 以及更早版本的 IE 的情形，在判斷實例對象的屬性是否存在時，我更傾向於使用in運算符，只有在需要判斷實例屬性時纔會用到hasOwnProperty()。

不管你什麼時候需要檢測屬性的存在性，請使用in運算符或者hasOwnProperty()。這樣做可以避免很多 bug。

擴展閱讀

歡迎來到石佳劼的博客，如有疑問，請在「原文」評論區留言，我會盡量爲您解答。

JavaScript檢測原始值、引用值、屬性

檢測原始值

檢測引用值

檢測函數

檢測數組

檢測屬性

擴展閱讀

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

網絡現代化通向雲原生應用的高速公路

面試官：說說你對序列化的理解

樣式佈局分享-基於frozen.js的移動OA

tab.js分享及瀏覽器兼容性問題彙總

如何排版微信公衆號「代碼塊」

《JavaScript 闖關記》之變量和數據類型

《JavaScript 闖關記》之表達式和運算符

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結