Problems and solutions caused by extending Array.prototype.indexOf for JS_Basic knowledge

Array does not have an indexOf method, so it is troublesome to find the index of an element in an array. For the convenience of calling, Array.prototype.indexOf() is extended through the prototype prototype, which makes it more convenient to use. But there was a problem with this custom indexOf when traversing the array.

Copy code The code is as follows:

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

Directly when using

Copy code The code is as follows:

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

After the expansion, it is very comfortable and convenient to use, creating a harmonious scene...

But one time when traversing array elements, a for..in.. loop was used, which caused other problems and broke the harmonious atmosphere.

Copy code The code is as follows:

var a=["Zhang Fei","Guan Yu","Liu Bei","Lü Bu"];
for(var p in a){
document.write(p "=" a[p] "
");
}

I originally wanted to output the names of these four people, but what was output?

The output is actually:

Copy code The code is as follows:

//0=Zhang Fei
//1=Guan Yu
//2=Liu Bei
//3=Lu Bu
//indexOf=function(item) { for (var i = 0; i < this.length; i ) { if (this[i] == item) return i; } return -1; }

In addition to typing out the name, it also outputs its own extended method indexOf. But the crazy thing is that Firefox is "normal" and only has the names of four people. Why is this?

Output indexOf, which can be expanded by itself, which is understandable. After all, for..in traverses all user-defined attributes of an object or all elements of an array.

So why not firefox?

I found out later after checking the information,

Array already supports Array.indexOf() in javascript version 1.6, and the firefox I use is version 3.5, which already supports javascript 1.8. IndexOf is an inherent method of Array itself.

As for IE, even though I am using IE8, it only supports version 1.3 of JavaScript.

So IE8 considers indexOf to be a "user-defined attribute", while Firefox considers it to be an inherent attribute supported by itself natively.

Is this really the case?

Do an experiment, rename indexOf to myIndexOf, and try again. As a result, both IE and firefox output myIndexOf, which proves that the previous point is correct.

Then here comes another problem. I have extended indexOf for a long time. Now many project codes are already using this method, but now I have to use for..in to output the elements of the array itself. I don’t want to extend it myself. What should I do if I get to Russia?

Fortunately, javascript provides the hasOwnProperty method.

Look at its description:

Copy code The code is as follows:

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

Looking at the description, it’s what we want.

Just make a judgment in for...in.. and it's OK

Copy code The code is as follows:

if(a.hasOwnProperty(p)){
                  document.write(p "=" a[p] "
");
}

In addition, here is an example of how to use hasOwnProperty, sourced from the Internet:

Copy code The code is as follows:

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

复制代码 代码如下:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
http://www.w3.org/1999/xhtml">