為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題及解決辦法

更新時(shí)間：2015年01月21日 14:51:05 投稿：hebedich

這篇文章主要介紹了為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問(wèn)題及解決辦法,需要的朋友可以參考下

Array沒(méi)有indexOf方法，這樣在一個(gè)數(shù)組中查找某個(gè)元素的索引時(shí)比較麻煩，為了調(diào)用方便，于是通過(guò)prototype原型擴(kuò)展了Array.prototype.indexOf()，這樣用起來(lái)就比較方便了。但是這個(gè)自定義的indexOf在對(duì)數(shù)組進(jìn)行遍歷的時(shí)候卻出現(xiàn)了問(wèn)題。

復(fù)制代碼代碼如下:

Array.prototype.indexOf = function(item) {  

for (var i = 0; i < this.length; i++) {  

if (this[i] == item)  

return i;  

}  

return -1;  

}

用的時(shí)候直接

復(fù)制代碼代碼如下:

var arr=[1,2,3,4,5];  

var index=arr.indexOf(1); //index==0

擴(kuò)展了以后，用起來(lái)很爽很方便，一片和諧景象...

但是某次是遍歷數(shù)組元素的時(shí)候，使用for..in..循環(huán)，引發(fā)了其他的問(wèn)題，打破了這個(gè)和諧的氛圍。

復(fù)制代碼代碼如下:

var a=["張飛","關(guān)羽","劉備","呂布"];  

for(var p in a){  

  document.write(p+"="+a[p]+"<br/>");  

}

本來(lái)想輸出這四個(gè)人的名字，結(jié)果輸出的是什么呢？

輸出的居然是：

復(fù)制代碼代碼如下:

//0=張飛  

//1=關(guān)羽  

//2=劉備  

//3=呂布  

//indexOf=function(item) { for (var i = 0; i < this.length; i++) { if (this[i] == item) return i; } return -1; }

除了把名字打出來(lái)以外，還額外輸出了自己擴(kuò)展的方法indexOf，但是令人瘋狂的是，firefox卻是“正?！钡模挥兴膫€(gè)人的人名，為什么會(huì)這樣？

輸出indexOf，自己擴(kuò)展的，可以理解，畢竟for..in是遍歷一個(gè)對(duì)象的所有用戶(hù)定義的屬性或者一個(gè)數(shù)組的所有元素。

那么firefox為什么不會(huì)？

后來(lái)查了資料才明白，

Array在javascript1.6版本已經(jīng)支持Array.indexOf()，而我用的firefox是3.5版本，已經(jīng)支持javascript1.8了，indexOf是其Array本身固有的方法了。

而IE，即使我用的是IE8，也才支持到j(luò)avascript1.3版本。

所以IE8認(rèn)為indexOf是“用戶(hù)定義的屬性”，而firefox認(rèn)為是自己原生支持的固有的屬性。

真的是這樣嗎？

做個(gè)實(shí)驗(yàn)，把indexOf更名為myIndexOf，再試試，結(jié)果IE和firefox都輸出myIndexOf，證明前面的觀點(diǎn)是正確。

那么又來(lái)了個(gè)問(wèn)題，我擴(kuò)展indexOf很久了，現(xiàn)在不少項(xiàng)目的代碼都已經(jīng)在使用這個(gè)方法，而現(xiàn)在我非要使用for..in輸出數(shù)組本身的元素，不要其他我自己擴(kuò)展到俄方法，怎么辦？

好在javascript提供了hasOwnProperty方法。

看一下其描述：

復(fù)制代碼代碼如下:

Every object descended from Object inherits the hasOwnProperty method. This method can be used to determine whether an object has the specified property as a direct property of that object; unlike the in operator, this method does not check down the object's prototype chain

看描述，就是我們想要的東西。

在for...in..里做個(gè) 判斷就OK了

復(fù)制代碼代碼如下:

if(a.hasOwnProperty(p)){  

            document.write(p+"="+a[p]+"<br/>");  

        }

另外，附上hasOwnProperty用法示例，來(lái)源于互聯(lián)網(wǎng)：

復(fù)制代碼代碼如下:

function Book(title, author) {  

   this.title = title;  

   this.author = author;  

  }  

   Book.prototype.price = 9.99;  

   Object.prototype.copyright = "herongyang.com";  

   var myBook = new Book("JavaScript Tutorials", "Herong Yang");  

   // Dumping built-in properties at the base prototype level  

   document.writeln("/nObject.prototype's built-in properties:");  

   dumpProperty(Object.prototype, "constructor");  

   dumpProperty(Object.prototype, "hasOwnProperty");  

   dumpProperty(Object.prototype, "isPrototypeOf");  

   dumpProperty(Object.prototype, "toString");  

   dumpProperty(Object.prototype, "valueOf");  

   dumpProperty(Object.prototype, "copyright");  

   // Dumping built-in properties at the my prototype level  

   document.writeln("/n==================/nBook.prototype's built-in properties:");  

   dumpProperty(Book.prototype, "constructor");  

   dumpProperty(Book.prototype, "hasOwnProperty");  

   dumpProperty(Book.prototype, "isPrototypeOf");  

   dumpProperty(Book.prototype, "toString");  

   dumpProperty(Book.prototype, "valueOf");  

   dumpProperty(Book.prototype, "copyright");  

   // Dumping built-in properties at the object level  

   document.writeln("/n==================/nmyBook's built-in properties:");  

   dumpProperty(myBook, "constructor");  

   dumpProperty(myBook, "hasOwnProperty");  

   dumpProperty(myBook, "isPrototypeOf");  

   dumpProperty(myBook, "toString");  

   dumpProperty(myBook, "valueOf");  

   dumpProperty(myBook, "copyright");  

function dumpProperty(object, property) {  

   var inheritance;   

   if (object.hasOwnProperty(property))   

      inheritance = "Local";  

   else  

      inheritance = "Inherited";  

   document.writeln(property+": "+inheritance+": " 

      +object[property]);  

}