js isArray小結

標籤：blog   class   java   tar   c   http   

原文:[轉載]js isArray小結

在日常開發中，我們經常需要判斷某個對象是否是數群組類型的，在js中檢測物件類型的常見的方法有幾種：

1、typeof操作符。對於Function、String、Number、Undefined這幾種類型的對象來說，不會有什麼問題，但是針對Array的對象就沒什麼用途了：

Js代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. alert(typeof null); // "object"  
2. alert(typeof []); // "object"  

2、instanceof操作符。此操作符檢測對象的原型鏈是否指向建構函式的prototype對象，恩，聽起來不錯，應該可以解決我們的數組檢測問題：

Js代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. var arr = [];   
2. alert(arr instanceof Array); // true   

3、對象的constructor屬性。除了instanceof，我們還可以利用每個對象都具有constructor的屬性來判斷其類型，於是乎我們可以這樣做:

Js代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. var arr = [];   
2. alert(arr.constructor == Array); // true  

貌似後兩個解決方案是無懈可擊的，但真的是這樣嗎？天有不測風雲，當你在多個frame中來回穿梭的時候，令人沮喪的問題出現了：

Js代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. var iframe = document.createElement_x(‘iframe‘);   
2. document.body.appendChild(iframe);   
3. xArray = window.frames[window.frames.length-1].Array;   
4. var arr = new xArray(1,2,3); // [1,2,3]   
5. // 哎呀！   
6. arr instanceof Array; // false   
7. // 哎呀呀！   
8. arr.constructor === Array; // false  

由於每個iframe都有一套自己的執行環境，跨frame執行個體化的對象彼此是不共用原型鏈的，因此導致上述檢測代碼失效！怎麼辦怎麼辦？？ 嗯，javascript是動態語言，或許萬金油“鴨式辨型”（duck type）可以助我們一臂之力“如果它走起路來像鴨子，叫起來也像鴨子，那就當他是鴨子吧”，同理，可以檢測某些數組對象特有的能力來做判斷，這個法子已 經有人用了，比如Prototype架構，來看看它實現的Object.isArray方法：

Js代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. isArray: function(object) {   
2. return object != null && typeof object == "object" &&  
3.  ‘splice‘ in object && ‘join‘ in object;   
4. }  

isArray：”object，你有splice、join這兩個數組特有的方法嗎？”
object:“嗯，沒錯我有！”
isArray：“好吧，那你就是個數組了，哪怕你是冒充的，囧……”

Js代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. var trickster = { splice: 1, join: 2 };   
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代碼  isArray小結" alt="收藏代碼" src="http://www.iteye.com/images/icon_star.png">

1. function isArray(o) {  
2.   return Object.prototype.toString.call(o) === ‘[object Array]‘;   
3. }  

call改變toString的this引用為待檢測的對象，返回此對象的字串表示，然後對比此字串是否是‘[object Array]‘，以判斷其是否是Array的執行個體。也許你要問了，為什麼不直接o.toString()？嗯，雖然Array繼承自Object，也會有 toString方法，但是這個方法有可能會被改寫而達不到我們的要求，而Object.prototype則是老虎的屁股，很少有人敢去碰它的，所以能 一定程度保證其“純潔性”：）

與前面幾個方案不同，這個方法很好的解決了跨frame對象構建的問題，經過測試，各大瀏覽器安全色性也很好，可以放心使用。一個好訊息是，很多框 架，比如jQuery、Base2等等，都計劃借鑒此方法以實現某些特殊的，比如數組、Regex等對象的類型判定，不用我們自己寫了。