首页 >web前端 >js教程 >为JS扩展Array.prototype.indexOf引发的问题及解决办法_基础知识

为JS扩展Array.prototype.indexOf引发的问题及解决办法_基础知识

WBOY
WBOY原创
2016-05-16 16:18:361274浏览

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

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

输出的居然是:

复制代码 代码如下:

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

另外,附上hasOwnProperty用法示例,来源于互联网:

复制代码 代码如下:

函数书(书名,作者){ 
   this.title = 标题; 
   this.author = 作者; 
  } 
   书本.原型.价格 = 9.99; 
   Object.prototype.copyright = "herongyang.com"; 
   var myBook = new Book("JavaScript 教程", "Herong Yang"); 
   // 在基本原型级别转储内置属性
   document.writeln("/nObject.prototype 的内置属性:"); 
   dumpProperty(Object.prototype, "构造函数"); 
   dumpProperty(Object.prototype, "hasOwnProperty"); 
   dumpProperty(Object.prototype, "isPrototypeOf"); 
   dumpProperty(Object.prototype, "toString"); 
   dumpProperty(Object.prototype, "valueOf"); 
   dumpProperty(Object.prototype, "版权"); 
   // 在我的原型级别转储内置属性
   document.writeln("/n==================/nBook.prototype的内置属性:"); 
   dumpProperty(Book.prototype, "构造函数"); 
   dumpProperty(Book.prototype, "hasOwnProperty"); 
   dumpProperty(Book.prototype, "isPrototypeOf"); 
   dumpProperty(Book.prototype, "toString"); 
   dumpProperty(Book.prototype, "valueOf"); 
   dumpProperty(Book.prototype, "版权"); 
   // 在对象级别转储内置属性
   document.writeln("/n==================/nmyBook的内置属性:"); 
   dumpProperty(myBook,“构造函数”); 
   dumpProperty(myBook, "hasOwnProperty"); 
   dumpProperty(myBook, "isPrototypeOf"); 
   dumpProperty(myBook,“toString”); 
   dumpProperty(myBook, "valueOf"); 
   dumpProperty(myBook, "版权"); 
函数 dumpProperty(对象, 属性) { 
   var 继承;  
   if (object.hasOwnProperty(property))  
      继承=“本地”; 
   否则
      继承=“继承”; 
   document.writeln(property ": " 继承 ": "
      对象[属性]); 
}

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

复制代码代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
http://www.w3.org/1999/xhtml"> 
 
 
  浏览器的JavaScript版本支持测试 
  
  
      
     
     
     
     
   
   
     
      //支持JavaScript1.7的浏览器才能够执行该脚本   
      document.write('该浏览器支持JavaScript1.7
');   
   
   
    
  

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn