9

我常好高騖遠痴心妄想胸懷壯志，總想寫出很"聰明"的Javascript函數，呼叫時傳入DOM元素也好、丟個jQuery物件也成、給個函數也可，程式都能依傳入的參數型別自動轉換處理。無奈自己不學無術，對於Javascript這種動態語言的變形蟲式型別處理，始終停留在懵懵懂懂的階段...

jQuery陸續提供了$.isArray(), $.isFunction(), $.isXmlDoc() 等函數，算是解決了部分難題，餘下的我則會用typeof varName來偵測。但說來好笑，"測試某變數是否為jQuery物件"卻是我一直搞不出來的罩門，只想到jQuery才具有的特殊屬性存在與否加以識別，卻又覺得萬一其他物件有同名屬性就會誤判，不夠精準，始終沒找到較佳的做法。

最近在讀Blog訂閱文章時，終於讓我學會了instanceof這個超基本關鍵字，總算補齊了自己蒐集Javascript型別偵測方法的最後一塊拼圖，特別PO文留念。[2011-05-11更新] 感謝網友NeiL補充，jQuery其實已內建.jquery屬性可以傳回jQuery版本，若為undefined則非jQuery物件，算是最正統的偵測方式。玩了這麼久jQuery，還是免不了有漏網之魚，在此感謝NeiL的熱心分享。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Silly Questions</title>
    <script type="text/javascript"
            src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.js"></script>
    <script type="text/javascript">
        $(function () {
            function createXmlDoc() {
                if (window.ActiveXObject) {
                    var xd = new ActiveXObject("Microsoft.XMLDOM");
                    xd.async = false;
                    xd.loadXML("<root />");
                    return xd;
                } else if (typeof DOMParser != "undefined") {
                    var xd =
                        new DOMParser().parseFromString("<root />", "text/xml");
                    return xd;
                }
                else return null;
            }
 
            var pool =
            {
                "number": 1,
                "string": "Darkthread",
                "boolean": true,
                "object": { name: "Darkthread" },
                "xmldoc": createXmlDoc(),
                "window": window,
                "null": null,
                "undefined": undefined,
                "array": [1, 2, 3],
                "function": function () { return; },
                "element": document.getElementById("x"),
                "jQuery": $("#x")
            }
            function detectType(x) {
                if (x === null)
                    return "null";
                else if (x === undefined)
                    return "undefined";
                else if (x instanceof jQuery)
                    return "jQuery object";
                else if ($.isArray(x))
                    return "array";
                else if ($.isFunction(x))
                    return "function";
                else if ($.isPlainObject(x))
                    return "plain object";
                else if ($.isWindow(x))
                    return "window";
                else if ($.isXMLDoc(x))
                    return "XML document";
                else if (x.nodeType == 1 && x.tagName)
                    return "<" + x.tagName + ">";
                else
                    return typeof x;
            }
            var result =
                $.map(pool, function (value, key) {
                    return key + " => " + detectType(value);
                });
            alert(result.join("\n"));
        });
    </script>
</head>
<body>
<span id='x'></span>
</body>
</html>

執行結果如下，萬歲!!

number => number
string => string
boolean => boolean
object => plain object
xmldoc => XML document
window => window
null => null
undefined => undefined
array => array
function => function
element => <span>
jQuery => jQuery object

以上就是我的私房JS型別偵測大全，歡迎指教。


Comments

# by 深海潛將

這篇太棒了～

# by NeiL

判斷是否為JQuery物件 這個在JQuery裡就有提供了 直接使用 .jquery 可參考這個網址 http://api.jquery.com/.jquery/

# by jain

感謝，趕快筆記~~

# by Jeffrey

@NeiL 謝謝你的補充!!! (又補到一條漏網之魚)

# by crossian

弄一個帶有jquery屬性的物件就破解了 var obj = {jquery: true}

# by lif

Object.prototype.toString.call(target) 这个也不错啊 http://bonsaiden.github.com/JavaScript-Garden/zh/#types

# by Walter

請問黑大 if (x === null) return "null"; ===有什麼特別的作用嗎

# by Jeffrey

to Walter, "==="表示會比對兩端的型別也必需一致，Javascript在"=="時會自動轉換型別，例如: 1 == "1", undefined == null都會得到true，但如果是1==="1", undefined===null則會傳回false。

# by Wade

null型別不是object嗎?!

Post a comment