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

JavaScript中的Array原型扩展：indexOf方法的问题与解决方案

在JavaScript中，当我们尝试扩展Array的原型以增加新的方法时，可能会遇到一些意想不到的问题。让我们以一个简单的例子来阐述这个问题，当我们为Array原型添加了indexOf方法后，在遍历数组时，如果使用for..循环可能会出现不希望出现的额外输出。这种情况在不同浏览器中的表现也会有所不同。让我们深入理解这个问题并寻找解决方案。

起初，由于JavaScript的Array原生并不包含indexOf方法，我们可能会选择扩展Array的原型以添加此方法。这样，我们就可以方便地在任何数组上调用indexOf方法以查找特定元素的索引。当我们在使用for..循环遍历数组时，这个问题就出现了。在遍历过程中，除了数组的元素外，此方法还会输出我们自定义的indexOf方法。这在某些浏览器中（如IE）表现得尤为明显。

这个问题的根源在于不同的浏览器对JavaScript的支持程度不同。一些较新的浏览器（如Firefox 3.5）已经内置了对Array的indexOf方法的支持，而一些较旧的浏览器（如IE8）则不支持。当我们使用for..循环遍历数组时，这些浏览器会输出所有的用户定义属性。这就导致了在遍历过程中除了数组元素外，还输出了我们自定义的indexOf方法。

为了解决这个问题，我们可以将自定义方法的名称改为其他名称以避免冲突。但如果已经在许多项目中使用了这个方法，并且现在需要避免输出自定义方法，那么我们可以使用对象的hasOwnProperty方法。这个方法可以检查一个对象是否具有特定的属性，并且只会检查对象本身的属性，不会检查原型链中的属性。这样我们就可以确保在遍历数组时只输出数组的元素，而不会输出自定义的方法。

在编程中，使用for..循环时，一个简单的判断就足够应对大部分情况。代码如下所示：

```javascript

if (a.hasOwnProperty(p)) {

document.write(p + "=" + a[p] + "
");

}

```

我想分享一些关于hasOwnProperty方法的使用示例。想象一下这样一个场景：你正在创建一个名为Book的对象，它有一些属性和从原型链继承的属性。为了展示这些属性是本地属性还是继承属性，你可以使用hasOwnProperty方法。以下是示例代码：

```javascript

function Book(title, author) {

this.title = title;

this.author = author;

}

Book.prototype.price = 9.99;

Object.prototype.copyright = "herongyang.";

var myBook = new Book("JavaScript Tutorials", "Herong Yang");

// 输出对象级别的内置属性

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");

// 输出原型级别的内置属性（针对Book对象）

document.writeln("/n==================/nBook.prototype's built-in properties:");

dumpProperty(Book.prototype, "constructor"); // 这将是继承自Object的构造函数属性等。以下类推。每个属性都会通过dumpProperty函数检查是否为本地属性或继承属性。然后输出相应的信息。这个函数的实现如下：如果对象有某个属性的本地版本（即不是从原型链继承的），那么它将标记为“Local”，否则标记为“Inherited”。同时输出该属性的值。通过这种方式，你可以清楚地看到哪些属性是本地定义的，哪些是继承自原型链的。这样的信息对于理解对象的属性和行为非常有帮助。这个代码片段将帮助你了解你的浏览器对JavaScript的支持程度。以下是一个简单的测试页面：在这个页面上，使用不同的JavaScript版本编写的脚本将被执行，并在页面上显示结果。如果浏览器支持某个版本的JavaScript，那么相应的脚本就会执行并显示一条消息。通过这种方式，你可以轻松地了解你的浏览器支持到哪个版本的JavaScript。如果你想要了解更多关于JavaScript版本的信息，你可以访问相关的在线资源或参考文档。希望这些代码片段对你有所帮助！如果你有任何其他问题或需要进一步的解释，请随时提问。现在让我们回到编程的世界，继续JavaScript的奥秘吧！