为JS扩展Array.prototype.indexOf引发的问题及解决办法

2013-04-07 08:37:02 作者:popotang 来源:查看 | 【

Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.indexOf(),这样用起来就比较方便了。但是这个自定义的indexOf在对数组进行遍历的时候却出现了问题。

Array没有indexOf方法,这样在一个数组中查找某个元素的索引时比较麻烦,为了调用方便,于是通过prototype原型扩展了Array.prototype.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]);  
}



 


查看浏览器支持javascript到哪个版本:


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  <title>浏览器的JavaScript版本支持测试</title>  
 </head>  
 <body>  
   <script language="JavaScript">    
   //document.write("您的浏览器类型:"+navigator.appName+"<br/>");  
   //document.write("浏览器版本:"+navigator.appVersion+"<br/>");  
      //支持JavaScript1.0的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.0<br/>');    
  </script>    
  <script language="JavaScript1.1">    
      //支持JavaScript1.1的浏览器才能够执行该脚本   
      document.write('该浏览器支持JavaScript1.1<br/>');    
  </script>    
  <script language="JavaScript1.2">    
      //支持JavaScript1.2的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.2<br/>');    
  </script>    
  <script language="JavaScript1.3">    
      //支持JavaScript1.3的浏览器才能够执行该脚本   
      document.write('该浏览器支持JavaScript1.3<br/>');    
  </script>    
  <script language="JavaScript1.4">    
      //支持JavaScript1.4的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.4<br/>');    
  </script>    
  <script language="JavaScript1.5">    
      //支持JavaScript1.5的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.5<br/>');    
  </script>  
  <script language="JavaScript1.6">    
      //支持JavaScript1.6的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.6<br/>');    
  </script>  
  <script   language="JavaScript1.7">    
      //支持JavaScript1.7的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.7<br/>');    
  </script>  
  <script language="JavaScript1.8">    
      //支持JavaScript 1.8的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.8<br/>');    
  </script>  
  <script language="JavaScript1.9">    
      //支持JavaScript1.9的浏览器才能够执行该脚本    
      document.write('该浏览器支持JavaScript1.9<br/>');    
  </script>   
 </body>  
</html>



热门标签:

  • indexOf
  • Array
  • 数组
  • 自定义方法


推荐资源