zoukankan      html  css  js  c++  java
  • 为JS扩展Array.prototype.indexOf引发的问题探讨及解决

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


    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]+"<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> 
  • 相关阅读:
    C#中文件操作【File】和【Directory】
    MySql的不同之处
    FileStream读写文件【StreamWriter 和 StreamReader】
    将对象序列化为XML文档
    SQL自增长的数据插入
    POJ3356 AGTC (最短编辑距离问题)
    POJ3070Fibonacci(矩阵快速幂求Fibonacci数列)
    HDOJ1058 Humble Numbers
    第三届软件大赛预赛A组试题及答案
    HDOJ4526 威威猫系列故事——拼车记
  • 原文地址:https://www.cnblogs.com/triggor/p/3102581.html
Copyright © 2011-2022 走看看