快捷導(dǎo)航

為JS擴(kuò)展Array.prototype.indexOf引發(fā)的問題探討及解決

更新時間：2013年04月24日 11:35:18 作者：

Array沒有indexOf方法，這樣在一個數(shù)組中查找某個元素的索引時比較麻煩，于是通過prototype原型擴(kuò)展了Array.prototype.indexOf(),在對數(shù)組進(jìn)行遍歷的時候卻出現(xiàn)了問題

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

Array沒有indexOf方法，這樣在一個數(shù)組中查找某個元素的索引時比較麻煩，為了調(diào)用方便，于是通過prototype原型擴(kuò)展了Array.prototype.indexOf()，這樣用起來就比較方便了。

復(fù)制代碼代碼如下:

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

用的時候直接

復(fù)制代碼代碼如下:

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

擴(kuò)展了以后，用起來很爽很方便，一片和諧景象...
但是某次是遍歷數(shù)組元素的時候，使用for..in..循環(huán)，引發(fā)了其他的問題，打破了這個和諧的氛圍。

復(fù)制代碼代碼如下:

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

本來想輸出這四個人的名字，結(jié)果輸出的是什么呢？
輸出的居然是：
//0=張飛
//1=關(guān)羽
//2=劉備
//3=呂布
//indexOf=function(item) { for (var i = 0; i < this.length; i++) { if (this[i] == item) return i; } return -1; }
除了把名字打出來以外，還額外輸出了自己擴(kuò)展的方法indexOf，但是令人瘋狂的是，firefox卻是“正?！钡模挥兴膫€人的人名，為什么會這樣？
輸出indexOf，自己擴(kuò)展的，可以理解，畢竟for..in是遍歷一個對象的所有用戶定義的屬性或者一個數(shù)組的所有元素。
那么firefox為什么不會？
后來查了資料才明白，
Array在javascript1.6版本已經(jīng)支持Array.indexOf()，而我用的firefox是3.5版本，已經(jīng)支持javascript1.8了，indexOf是其Array本身固有的方法了。
而IE，即使我用的是IE8，也才支持到j(luò)avascript1.3版本。
所以IE8認(rèn)為indexOf是“用戶定義的屬性”，而firefox認(rèn)為是自己原生支持的固有的屬性。
真的是這樣嗎？
做個實驗，把indexOf更名為myIndexOf，再試試，結(jié)果IE和firefox都輸出myIndexOf，證明前面的觀點(diǎn)是正確。
那么又來了個問題，我擴(kuò)展indexOf很久了，現(xiàn)在不少項目的代碼都已經(jīng)在使用這個方法，而現(xiàn)在我非要使用for..in輸出數(shù)組本身的元素，不要其他我自己擴(kuò)展到俄方法，怎么辦？
好在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了

復(fù)制代碼代碼如下:

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

另外，附上hasOwnProperty用法示例，來源于互聯(lián)網(wǎng)：

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

 
<!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的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.0<br/>'); 
</script> 
<script language="JavaScript1.1"> 
//支持JavaScript1.1的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.1<br/>'); 
</script> 
<script language="JavaScript1.2"> 
//支持JavaScript1.2的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.2<br/>'); 
</script> 
<script language="JavaScript1.3"> 
//支持JavaScript1.3的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.3<br/>'); 
</script> 
<script language="JavaScript1.4"> 
//支持JavaScript1.4的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.4<br/>'); 
</script> 
<script language="JavaScript1.5"> 
//支持JavaScript1.5的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.5<br/>'); 
</script> 
<script language="JavaScript1.6"> 
//支持JavaScript1.6的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.6<br/>'); 
</script> 
<script language="JavaScript1.7"> 
//支持JavaScript1.7的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.7<br/>'); 
</script> 
<script language="JavaScript1.8"> 
//支持JavaScript 1.8的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.8<br/>'); 
</script> 
<script language="JavaScript1.9"> 
//支持JavaScript1.9的瀏覽器才能夠執(zhí)行該腳本 
document.write('該瀏覽器支持JavaScript1.9<br/>'); 
</script> 
</body> 
</html> 