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

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了为JS扩展Array.prototype.indexOf引发的问题及解决办法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6265字，纯文字阅读大概需要9分钟。

内容图文

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>

内容总结

以上是互联网集市为您收集整理的为JS扩展Array.prototype.indexOf引发的问题及解决办法全部内容，希望文章能够帮你解决为JS扩展Array.prototype.indexOf引发的问题及解决办法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/359755.html

来源：【匿名】

【上一篇】JavaScript的内存释放问题详解【下一篇】javascript 怎么调用php方法

更多 ►

【为JS扩展Array.prototype.indexOf引发的问题及解决办法】教程文章相关的互联网学习教程文章

javascript中各类的prototype属性【代码】

prototype作用：获取调用对象的对象原型引用应用：可以为某对象原型添加方法例：function getMax() {var max = this[0];for(var x=0; x<this.length; x++){if(this[x] > max)max = this[x];}return max; } Array.prototype.getMax = getMax;//以后数组使用获取最大值的方法就可以如下调用，例如arr是以个整数数组 arr.getMax();//OK 原文：http://www.cnblogs.com/fantasy01/p/4072581.html

JavaScript——this、constructor、prototype【代码】

thisthis表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window；如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。我们还可以使用apply和call两个全局方法来改变函数中this的具体指向。先看一个在全局作用范围内使用this的例子： <script type="text/javascript">console.log(this === window); // trueconsole.log(window.alert === this.alert); // trueconsole.log(th...

javascript中的prototype详细解释【代码】

本文基于下面几个知识点: 1.在.Net中可以使用clone()来实现原型法原型法的主要思想是，现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展。我们称B的原型为A。 2.javascript的方法可以分为三类： a 类方法 b 对象方法 c 原型方法例子：functionPeople(name) {this.name=name;//对象方法this.Introduce=function(){alert("My name is "+this.name);} } //类方法 People.Run=function(){alert("I can run"); ...

HTML 学习笔记 JavaScript (prototype)【代码】【图】

原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html原博客的作者是一个非常牛逼的前端大神，我作为一个初学者，在此借助大神的博客进行自己的学习。在这里感谢原作者无私的分享。也强烈建议大家到原作者的博客下学习。好了，现在让我们跟着大神的脚步前进吧。用过JavaScript的人肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都有一个prototype属性，可以为其添加函数供实例访问，其他的...

javascript: prototype【代码】

[ 作者：byeyear Email：east3@163.com 转载请注明 ]古希腊有哲学家认为，在那遥远的虚无之处，人类目光所不能及的地方，有一匹原型马，世间万马皆依此而生。我们有构造函数horse()用于从原型马构造一匹我们能看到、触摸到、骑到的马：function horse() {this.color = ‘red‘;this.height = 80;this.length = 160; }// Now, if you want, you can construct your own horse.// var myHorse = new horse();可以从该构造函数访...

JavaScript学习--Item15 prototype原型和原型链详解【代码】【图】

用过JavaScript的同学们肯定都对prototype如雷贯耳，但是这究竟是个什么东西却让初学者莫衷一是，只知道函数都会有一个prototype属性，可以为其添加函数供实例访问，其它的就不清楚了，最近看了一些 JavaScript高级程序设计，终于揭开了其神秘面纱。每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用...

关于JS的prototype(原型)(转载)

最近在自学JS 发现了一个不错的BLOG 里面对JS的语法讲解的比较透彻适合新入门的选手研究一番https://bonsaiden.github.io/JavaScript-Garden原型JavaScript 不包含传统的类继承模型，而是使用 prototype 原型模型。虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现 JavaScript 中的原型继承则要困难的多。 (It is for example fairly trivia...

关于js中object对象的prototype

我们都有一个误区，就是认为形成 Javascript 对象的prototype chain 的 prototype 就是一个名字为 prototype 的属性，而且是可以访问的。其实，Javascript 的 prototype 和名字为 prototype 的属性在一开始一点儿关系都没有，是两个不同的事物。 var Richard = new Object(); alert(typeof(Richard.prototype)); //undefinedvar Richard = new Object(); alert(Richard.__proto__); //[object Object]对于一般对象来说，我们只能...

JavaScript中的prototype属性【代码】【图】

1 <!doctype html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>Document</title>6 <script type="text/javascript">7/* 8 每个函数都有一个prototype属性，这个属性是指向一个对象的引用，这个对象称为原型对象，原型对象包含函数实例共享的方法和属性，也就是说将函数用作构造函数调用（使用new操作符调用）的时候，新创建的对象会从原型对象上继承属性和方法。9*/10function employee(n...

js中_proto_ constructor prototype的作用【图】

日常只是使用，对于__proto__,prototype,construct属性知道的总是解释不太清楚，有点糊里糊涂，一知半解，今天理理清楚。js中使用的对象，有函数对象，声明对象，实例化对象。例子代码：funtion Person（）{ }；var p=new Person();1.__proto__和construction是对象所具有的属性，2.prototype是函数所具有的属性，是实例化对象所共有的属性和方法的对象，是实例化对象所共享的对象。因为函数也是一种对象，所以函数也具有__proto_...

javascript中的prototype和constructor

http://www.jb51.net/article/25027.htmhttp://blog.csdn.net/chunqiuwei/article/details/22092551http://developer.51cto.com/art/200907/134913.htm 总结：特别说明：只有构造函数才有prototype属性，而构造函数的实例是没有该属性的，也就是说 console.log(a1.prototype)输出的是undefined。在javascript中，每个函数都自动有一个prototype属性，而不是每一个对象拥有prototype属性原型属性与实例对象的创建与否没有关系，它...

面向对象的JavaScript-006-Function.prototype.bind() 的4种作用【代码】【图】

1. 1// Function.prototype.bind() 的作用 2 3// 1.Creating a bound function 4this.x = 9; 5var module = {6 x: 81,7 getX: function() { returnthis.x; }8 };9 10 console.log(module.getX()); // 81 11 12var retrieveX = module.getX;13 console.log(retrieveX()); 14// 9, because in this case, "this" refers 15// to the global object 16 17// Create a new function with ‘this‘ bound to ...

JavaScript面向对象编程（4）prototype使用案例:内置对象增强【代码】

接上一讲，prototype可以用于动态增强对象，那么有些js的原生类，没有提供我们想要的功能的时候，我们就可以用prototype对其增强。下面是一些具体的案例，希望大家能举一反三：<pre name="code" class="javascript">//检测指定元素是否在数组中 Array.prototype.contains=function(e){for(i in this){if(this[i]===e)return true; }return false; }; //测一测 alert(new Array('a','b').contains('a')); var arr = ['red','yellow'...

JavaScript中的prototype【代码】【图】

1、prototype 在JavaScript中并没有类的概念，但JavaScript中的确可以实现重载，多态，继承。这些实现其实方法都可以用JavaScript中的引用和变量作用域结合prototype来解释。 2、Simple Examplevar Blog = function( name, url ){this.name = name;this.url = url; }; Blog.prototype.jumpurl = ‘‘; Blog.prototype.jump = function(){window.location = this.jumpurl; }; /**等同于 Blog.prototype = {jumpurl : ‘‘,jump : fu...

JavaScript 面向对象 (prototype 原型模式)【代码】【图】

一、 JavaScript 设计思想　　1994年，网景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第一个比较成熟的网络浏览器，轰动一时。但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。比如，如果网页上有一栏"用户名"要求填写，浏览器就无法判断访问者是否真的填写了，只有让服务器端判断。如果没有填写，服务器端就返回错误，要求用户重新填写，这太浪费时间和服务器资源了。　　因此，网景公司急需一种网...

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

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【为JS扩展Array.prototype.indexOf引发的问题及解决办法】教程文章相关的互联网学习教程文章

INDEXOF - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程