JavaScript的類型檢測

arashicage 發布于2019-08-21 14:17 / 1790人閱讀

摘要：類型檢測在中提供兩種檢測類型的方法，但是它們并不總是靠譜。引用類型引用類型使用檢測，返回都是。這個時候可以用，它的語法是實例對象構造函數不僅能檢測構造對象的構造器，還檢測原型鏈。

類型檢測

在js中提供兩種檢測類型的方法，但是它們并不總是靠譜。

typeof

instanceof

下面我們來看看各個類型的應該如何進行檢測比較靠譜

1. 基本類型

基本類型(除null之外)的檢測使用typeof，它的語法很簡單

var number = 1,
    string = "s",
    boolean = true,
    un = undefined,

typeof number; // "number"
typeof string; // "string"
typeof boolean;// "boolean"
typeof un; // "undefined"

1.2 null

如果我們使用typeof來檢測，結果會是

var n = null;
typeof n;//"object"

有人說這是個bug，有人說這是因為null本身就代表著一個空對象，我們也經常用null來解除引用。不管怎么說，我們可以這樣檢測null

var n = null;
function isNull(n){
    if(!n && typeof n !== "undefined"){
        return true;
    }
    return false;
}
isNull(n);// true

1.3 非數字

判斷一個變量是否是數字，可以使用isNaN()，這個方法的意思是is not a numher，也就是說返回true的時候說明變量不是一個數字。

var a = 1,
    b = "s",
    c = "1";
isNaN(a); // false
isNaN(b); // true
isNaN(c); // true

2. 引用類型

引用類型使用typeof檢測，返回都是"object"。這其實沒什么意義，我們要知道的是變量具體是哪個引用類型的，例如數組，自定義的類型等等。這個時候可以用instanceof，它的語法是

實例 instanceof 對象構造函數

var arr = [];
arr instanceof Array; // true
function Person(){};
var p = new Person();
p instanceof Person; // true

instanceof不僅能檢測構造對象的構造器，還檢測原型鏈。

var now = new Date();
now instanceof Date; // true
now instanceof Object; // true

2.1 數組檢測

數組在編程中相當常見，在框架中也是，如何準確地檢測數組類型，是相當重要的。

可能有人會說了，使用instanceof不就可以了。非也。在js中，有一個很古老的跨域問題：在iframe之間來回傳遞數組，而instanceof不能跨幀。

什么叫不能跨幀？假設在一個瀏覽器的幀（frame A）里的一個對象傳入到另外一個幀（frame B）中，兩個幀都定義了一個構造函數Person，如果來自幀A的對象是幀APerson的實例，則

frameAPersonInstance instanceof frameAPerson; //true

frameAPersonInstance instanceof frameBPerson; //false

那怎么辦？

首先，有人提出了使用duck typing的思路來解決這個問題，duck typing的意思就是：像鴨子一樣走路、游泳并且嘎嘎叫的就是鴨子，這是個很有意思的想法，它的本質就是我們關注對象能做什么，不是關注對象是什么，采用這樣的思路，我們檢測對象實例是否有sort屬性來判斷對象實例是否是一個數組，具體實現如下

function isArray(value) {
    return typeof value.sort === "function";
}

之后，kangax發現了一個很有趣的現象，調用某個值的內置toString()方法在所有瀏覽器中都返回標準的字符串結果，對于數組來說，返回的字符串為"[object Array]"，這個方法對識別內置對象都非常有效，因此jq也是采取了這種方式來實現的isArray()的方法。

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

之后，ECMA5將Array.isArray()正式引入JavaScript，提供了一個能準確檢測一個變量是否為數組類型的

Array.isArray(variable);

3. 最后

到這里，你以為已經解決了所有的類型檢測問題了嗎？并不是。在《JavaScript框架設計》這本書中，詳細地談論各種類型檢測的兼容性問題，并且在massframework給出了一個很不錯的實現，從代碼里面來學習可以學到更多。

// 建立類型的映射
var class2type = {
    "[objectHTMLDocument]"       : "Document",
    "[objectHTMLCollection]"     : "NodeList",
    "[objectStaticNodeList]"     : "NodeList",
    "[objectIXMLDOMNodeList]"    : "NodeList",
    "[objectDOMWindow]"          : "Window",
    "[object global]"            : "Window", //safari 4.04
    "null"                       : "null",
    "NaN"                        : "NaN",
    "undefined"                  : "undefined"
};

// 正常情況下的類型
"Boolean,Number,String,Function,Array,Date,RegExp,Window,Document,Arguments,NodeList"
    .replace(/[^, ]/g, function(name) {
        class2type["[object " + name + "]"] = name;
    });

var toString = class2type.toString;

mass.type = function(obj,str){
    var result = class2type[ (obj == null || obj !== obj) ? obj : toString.call(obj) ]
                    || obj.nodeName || "#";

    if(result.charAt(0) === "#" ){  //兼容舊版瀏覽器與處理個別情況，如window.opera

        //hack,利用IE6,IE7,IE8 window == document 為 true，document == window 為 false的特性
        if(obj == obj.document && obj.document != obj){
            result = "Window";
        } else if (obj.nodeType === 9){ //nodeType 屬性返回以數字值返回指定節點的節點類型。9代表document
            result = "Document";
        } else if (obj.callee){ //arguments 特有的屬性
            resutl = "Arguments";
        } else if (isFinite(obj.length) && obj.item){ //obj.item()方法，可返回節點列表中處于指定的索引號的節點。
            result = "NodeList";
        } else {
            result = toString.call(obj).slice(8,-1); //[object XXXX]
        }

    }

    //提供一個進行類型比較的功能
    if(str){ 
        return str === result;
    }
    return result;
}

4. 參考

《編寫可維護的JavaScript》

《JavaScript框架設計》

GPU云服務器云服務器 javascript的類型類型檢測 java 檢測類型 js檢測數據類型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87855.html

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

摘要：檢測函數從技術上講，中的函數是引用類型，同樣存在構造函數，每個函數都是其實例，比如不好的寫法然而，這個方法亦不能跨幀使用，因為每個幀都有各自的構造函數，好在運算符也是可以用于函數的，返回。上周寫過一篇讀書筆記《編寫可維護的JavaScript》之編程實踐，其中第8章避免『空比較』是博主在工作中遇坑較多的雷區，所以特此把該章節重新整理分享，希望大家不再坑隊友(＞﹏＜)。在 Jav...

劉德剛 2019-08-19 18:33 評論0 收藏0
JavaScript中的數據類型及其檢測

摘要：中的數據類型及其檢測數據類型基本類型引用類型類型檢測只能檢測基本數據類型，對于還有一個用于檢測某個對象的原型鏈是否包含某個構造函數的屬性適用于檢測對象，它是基于原型鏈運作的屬性返回一個指向創建了該對象原型的函數引用，該屬性的值是哪個函數本身 JavaScript中的數據類型及其檢測 1. 數據類型 1.1 基本類型 Number String Boolean Null Undefin...

Bryan 2019-08-22 10:36 評論0 收藏0
JavaScript類型檢測詳解

摘要：種原始類型對象屬性種原始類型中種原始類型為，，，，發現除外的其他種基本類型均可以用來識別因為會得到，所以直接用來檢測對象的對象包括內置對象，，等和自定義對象。其他檢測方法，都各有缺陷，不能精確。屬性檢測屬性是否在實例對象中應該用。本篇介紹一下如何檢測JavaScript各種類型。 ? 5種原始類型? 對象? Function? Array? 屬性 5種原...

張金寶 2019-08-20 10:28 評論0 收藏0
javascript基礎篇:JS中的數據類型檢測專題

摘要：用來檢測數據類型的運算符語法雖然是基本數據類型值，但是它屬于空對象指針，檢測的結果是對象使用有自己的局限性，不能具體細分當前的值是數組還是正則也就是不能細分對象類型的值先算檢測某一個實例是否屬于某各類的實例構造函數使用檢測某個值是否屬于某 typeof 用來檢測數據類型的運算符語法:typeof[value] typeof 12 //=>number typeof NaN //=>nu...

Honwhy 2019-08-23 15:44 評論0 收藏0
javascript中對變量類型的判斷

摘要：當需要變量是否是類型時，可以使用進行判斷。本來是原型對象上的屬性，指向構造函數。不過使用也不是保險的，因為屬性是可以被修改的，會導致檢測出的結果不正確，例如在上面的例子中，原型中的被修改為指向到，導致檢測不出實例對象真實的構造函數。在JavaScript中，有5種基本數據類型和1種復雜數據類型，基本數據類型有：Undefined, Null, Boolean, Number和Stri...

entner 2019-08-21 10:34 評論0 收藏0