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

为JS扩展Array.prototype.indexOf引发的问题探讨及解决_javascript技巧

WBOY

Lepaskan： 2016-05-16 17:35:40

asal

1012 orang telah melayarinya

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

Array没有indexOf方法，这样在一个数组中查找某个元素的索引时比较麻烦，为了调用方便，于是通过prototype原型扩展了Array.prototype.indexOf()，这样用起来就比较方便了。

复制代码代码如下:

 
Array.prototype.indexOf = function(item) { 
for (var i = 0; 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 除了把名字打出来以外，还额外输出了自己扩展的方法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用法示例，来源于互联网：

复制代码代码如下:

 
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到哪个版本：

复制代码代码如下:

浏览器的JavaScript版本支持测试