Javascript isArray 數群組類型檢測函數

來源:互聯網
上載者:User

1、typeof操作符。對於Function、String、Number、Undefined這幾種類型的對象來說,不會有什麼問題,但是針對Array的對象就沒什麼用途了:
Js代碼 複製代碼 代碼如下:alert(typeof null); // "object"
alert(typeof []); // "object"

2、instanceof操作符。此操作符檢測對象的原型鏈是否指向建構函式的prototype對象,恩,聽起來不錯,應該可以解決我們的數組檢測問題:
Js代碼 複製代碼 代碼如下:var arr = [];
alert(arr instanceof Array); // true

3、對象的constructor屬性。除了instanceof,我們還可以利用每個對象都具有constructor的屬性來判斷其類型,於是乎我們可以這樣做:
Js代碼 複製代碼 代碼如下:var arr = [];
alert(arr.constructor == Array); // true

貌似後兩個解決方案是無懈可擊的,但真的是這樣嗎?天有不測風雲,當你在多個frame中來回穿梭的時候,令人沮喪的問題出現了:
Js代碼 複製代碼 代碼如下:var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
xArray = window.frames[window.frames.length-1].Array;
var arr = new xArray(1,2,3); // [1,2,3]
// 哎呀!
arr instanceof Array; // false
// 哎呀呀!
arr.constructor === Array; // false

由於每個iframe都有一套自己的執行環境,跨frame執行個體化的對象彼此是不共用原型鏈的,因此導致上述檢測代碼失效!怎麼辦怎麼辦??嗯,javascript是動態語言,或許萬金油“鴨式辨型”(duck type)可以助我們一臂之力“如果它走起路來像鴨子,叫起來也像鴨子,那就當他是鴨子吧”,同理,可以檢測某些數組對象特有的能力來做判斷,這個法子已經有人用了,比如Prototype架構,來看看它實現的Object.isArray方法:
Js代碼 複製代碼 代碼如下:isArray: function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}

isArray:”object,你有splice、join這兩個數組特有的方法嗎?”
object:“嗯,沒錯我有!”
isArray:“好吧,那你就是個數組了,哪怕你是冒充的,囧……”
Js代碼 複製代碼 代碼如下:var trickster = { splice: 1, join: 2 };
Object.isArray(trickster); // 假冒成功,耶

沒錯,這個解決方案給人的感覺有點彆扭,任何一個具有'splice'和'join'屬性的對象都能通過這個檢測!怎麼辦怎麼辦怎麼辦??別著急,仔細想想,其實我們需要的是一個能取得對象實際類型,而且又能跨frame使用的方法即可。這不,細心的老外在翻閱ECMA262標準的時候發現了這個(btw,我也看了,怎麼就沒發現這個用途呢,囧):
ECMA-262 寫道 複製代碼 代碼如下:Object.prototype.toString( ) When the toString method is called, the following steps are taken:
1. Get the [[Class]] property of this object.
2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.
3. Return Result (2)

上面的規範定義了Object.prototype.toString的行為:首先,取得對象的一個內部屬性[[Class]],然後依據這個屬性,返回一個類似於"[object Array]"的字串作為結果(看過ECMA標準的應該都知道,[[]]用來表示語言內部用到的、外部不可直接存取的屬性,稱為“內部屬性”)。利用這個方法,再配合call,我們可以取得任何對象的內部屬性[[Class]],然後把類型檢測轉化為字串比較,以達到我們的目的。還是先來看看在ECMA標準中Array的描述吧:
ECMA-262 寫道 複製代碼 代碼如下:new Array([ item0[, item1 [,…]]])
The [[Class]] property of the newly constructed object is set to “Array”.

於是乎,可以改寫之前的isArray函數以利用這個特性,如下:
Js代碼 複製代碼 代碼如下:function isArray(o) {
return Object.prototype.toString.call(o) === '[object Array]';
}

call改變toString的this引用為待檢測的對象,返回此對象的字串表示,然後對比此字串是否是'[object Array]',以判斷其是否是Array的執行個體。也許你要問了,為什麼不直接o.toString()?嗯,雖然Array繼承自Object,也會有toString方法,但是這個方法有可能會被改寫而達不到我們的要求,而Object.prototype則是老虎的屁股,很少有人敢去碰它的,所以能一定程度保證其“純潔性”:)
與前面幾個方案不同,這個方法很好的解決了跨frame對象構建的問題,經過測試,各大瀏覽器安全色性也很好,可以放心使用。一個好訊息是,很多架構,比如jQuery、Base2等等,都計劃借鑒此方法以實現某些特殊的,比如數組、Regex等對象的類型判定,不用我們自己寫了。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.