為JS擴展Array.prototype.indexOf引發的問題及解決辦法

2019-11-20 13:20:26

字體：大中小

來源：轉載

供稿：網友

Array沒有indexOf方法，這樣在一個數組中查找某個元素的索引時比較麻煩，為了調用方便，于是通過prototype原型擴展了Array.prototype.indexOf()，這樣用起來就比較方便了。但是這個自定義的indexOf在對數組進行遍歷的時候卻出現了問題。

復制代碼代碼如下:

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

用的時候直接

復制代碼代碼如下:

var arr=[1,2,3,4,5];  
var index=arr.indexOf(1); //index==0

擴展了以后，用起來很爽很方便，一片和諧景象...

但是某次是遍歷數組元素的時候，使用for..in..循環，引發了其他的問題，打破了這個和諧的氛圍。

復制代碼代碼如下:

var a=["張飛","關羽","劉備","呂布"];  
for(var p in a){  
  document.write(p+"="+a[p]+"<br/>");  
}

本來想輸出這四個人的名字，結果輸出的是什么呢？

輸出的居然是：

復制代碼代碼如下:

//0=張飛  
//1=關羽  
//2=劉備  
//3=呂布  
//indexOf=function(item) { for (var i = 0; i < this.length; i++) { if (this[i] == item) return i; } return -1; }  

除了把名字打出來以外，還額外輸出了自己擴展的方法indexOf，但是令人瘋狂的是，firefox卻是“正常”的，只有四個人的人名，為什么會這樣？

輸出indexOf，自己擴展的，可以理解，畢竟for..in是遍歷一個對象的所有用戶定義的屬性或者一個數組的所有元素。

那么firefox為什么不會？

后來查了資料才明白，

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

而IE，即使我用的是IE8，也才支持到javascript1.3版本。

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

真的是這樣嗎？

做個實驗，把indexOf更名為myIndexOf，再試試，結果IE和firefox都輸出myIndexOf，證明前面的觀點是正確。

那么又來了個問題，我擴展indexOf很久了，現在不少項目的代碼都已經在使用這個方法，而現在我非要使用for..in輸出數組本身的元素，不要其他我自己擴展到俄方法，怎么辦？

好在javascript提供了hasOwnProperty方法。

看一下其描述：

復制代碼代碼如下:

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..里做個判斷就OK了

復制代碼代碼如下:

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

另外，附上hasOwnProperty用法示例，來源于互聯網：

復制代碼代碼如下:

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]);  
}