TIPS-我的Javascript型別偵測大全

我常好高騖遠痴心妄想胸懷壯志,總想寫出很"聰明"的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型別偵測大全,歡迎指教。

歡迎推文分享:
Published 11 May 2011 06:11 AM 由 Jeffrey
Filed under: ,
Views: 11,927



意見

# 深海潛將 said on 10 May, 2011 09:24 PM

這篇太棒了~

# NeiL said on 11 May, 2011 03:39 AM

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

# jain said on 11 May, 2011 09:52 AM

感謝,趕快筆記~~

# Jeffrey said on 11 May, 2011 10:19 AM

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

# crossian said on 14 May, 2011 07:32 AM

弄一個帶有jquery屬性的物件就破解了

var obj = {jquery: true}

# lif said on 20 May, 2011 10:56 AM

Object.prototype.toString.call(target)

这个也不错啊

bonsaiden.github.com/.../zh

# Walter said on 28 June, 2011 02:23 AM

請問黑大

if (x === null)  return "null";

===有什麼特別的作用嗎

# Jeffrey said on 28 June, 2011 10:27 AM

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

# Wade said on 13 November, 2017 10:22 PM

null型別不是object嗎?!

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2011>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC
最新回應

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication