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


Posted in Javascript onJanuary 21, 2015

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]+"<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>
Javascript 相关文章推荐
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
JQuery球队选择实例
May 18 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
JavaScript的内存释放问题详解
Jan 21 #Javascript
script标签属性用type还是language
Jan 21 #Javascript
JS交换变量的方法
Jan 21 #Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 #Javascript
js实现DOM走马灯特效的方法
Jan 21 #Javascript
浅谈javascript 迭代方法
Jan 21 #Javascript
js实现用户注册协议倒计时的方法
Jan 21 #Javascript
You might like
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
php实现httpRequest的方法
2015/03/13 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
vue 运用mock数据的示例代码
2017/11/07 Javascript
angular之ng-template模板加载
2017/11/09 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
推荐11个实用Python库
2015/01/23 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
在python shell中运行python文件的实现
2019/12/21 Python
python二维图制作的实例代码
2020/12/03 Python
Python实现随机爬山算法
2021/01/29 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
怎么写自荐书范文
2014/02/12 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
七一党日活动总结
2014/07/08 职场文书
2014年优秀党员材料
2014/12/18 职场文书
师德先进个人材料
2014/12/20 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
社区党员干部承诺书
2015/05/04 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
大学生受助感言
2015/08/01 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers