扩展Array.prototype.indexOf而引发的问题

Wed, 10 Nov 2010 03:22:22 +0000

因为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]+"
");
}

本来想输出这四个人的名字，结果输出的是什么呢？

输出的居然是：

除了把名字打出来以外，还额外输出了自己扩展的方法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了

另外，附上hasOwnProperty用法示例，来源于互联网：

function Book(title, author) {
   this.title = title;
   this.author = author;
  }
   Book.prototype.price = 9.99;
   Object.prototype.copyright = "idcpw.com";
   var myBook = new Book("JavaScript Tutorials", "Jony Heck");
   // 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>

Tags - array , firefox , ie , javascript , prototype , 兼容

[评论] 扩展Array.prototype.indexOf而引发的问题

Thu, 01 Jan 1970 00:00:00 +0000

Heck's Blog

扩展Array.prototype.indexOf而引发的问题

[评论] 扩展Array.prototype.indexOf而引发的问题