JS_javascript 기술에 대한 Array.prototype.indexOf 확장으로 인해 발생하는 문제에 대한 토론 및 해결 방법-JS 튜토리얼-php.cn

JS_javascript 기술에 대한 Array.prototype.indexOf 확장으로 인해 발생하는 문제에 대한 토론 및 해결 방법

WBOY

풀어 주다： 2016-05-16 17:35:40

원래의

1010명이 탐색했습니다.

Array에는 indexOf 메소드가 없기 때문에 배열에 있는 요소의 인덱스를 찾는 것이 번거롭습니다. 호출의 편의를 위해 프로토타입 프로토타입을 통해 Array.prototype.indexOf()를 확장하여 사용하기 더 편리합니다. . 그러나 배열을 순회할 때 이 사용자 정의 indexOf에 문제가 있었습니다.

Array에는 indexOf 메서드가 없으므로 배열에서 요소의 인덱스를 찾는 것이 더 번거롭습니다. 호출의 편의를 위해 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=["Zhang Fei", "관우" ,"유비","여부"]

for(var p in a){ 
document.write(p "=" a[p] "
" ); 
} 

 
원래는 이 4명의 이름을 출력하고 싶었는데 무엇이 출력되었나요? 

실제로 출력은 다음과 같습니다.
//0=Zhang Fei
//1=Guan Yu
//2=Liu Bei
//3=Lü Bu
//indexOf =function( item) { for (var i = 0; i < this.length; i ) { if (this[i] == item) return i } return -1 }
입력하는 것 외에도; 이름은 자체 확장 메소드인 indexOf도 출력하지만, 이상한 점은 Firefox가 "정상"이고 4명의 이름만 가지고 있다는 것입니다.
자체적으로 확장할 수 있는 출력 indexOf는 결국 for..in이 객체의 모든 사용자 정의 속성이나 배열의 모든 요소를 탐색합니다.
그렇다면 파이어폭스는 어떨까요?
정보를 확인해보니
Array는 이미 javascript 버전 1.6에서 Array.indexOf()를 지원하고 있고, 제가 사용하는 Firefox는 버전 3.5인데, 이미 javascript1.8을 지원하는 IndexOf가 Array 자체에 내장되어 있습니다. 방법.
IE의 경우 IE8을 사용하고 있음에도 불구하고 JavaScript 버전 1.3만 지원합니다.
따라서 IE8은 indexOf를 "사용자 정의 속성"으로 간주하는 반면 Firefox는 기본적으로 자체적으로 지원되는 고유 속성으로 간주합니다.
정말 그런가요?
실험을 수행하고 indexOf의 이름을 myIndexOf로 바꾸고 다시 시도하십시오. 결과적으로 IE와 Firefox 모두 myIndexOf를 출력하여 이전 점이 정확하다는 것을 증명합니다.
그리고 또 다른 문제가 발생합니다. 오랫동안 indexOf를 확장해 왔습니다. 이제 많은 프로젝트 코드에서 이미 이 방법을 사용하고 있지만 이제는 배열 자체의 요소를 출력하기 위해 for..in을 사용해야 합니다. 직접 연장하고 싶지 않아요. 러시아에 가면 어떻게 해야 하나요?
다행히 자바스크립트에서는 hasOwnProperty 메소드를 제공합니다.
설명을 살펴보세요.
Object의 자손인 모든 개체는 hasOwnProperty 메서드를 상속합니다. 이 메서드는 in 연산자와 달리 개체가 해당 개체의 직접 속성으로 지정된 속성을 가지고 있는지 확인하는 데 사용할 수 있습니다. 객체의 프로토타입 체인을 확인하지 않습니다
설명을 보면 우리가 원하는 것입니다.
그냥...in..에서 판단하세요.

코드 복사 코드는 다음과 같습니다.

if(a.hasOwnProperty(p)){

document.write(p "=" a[p] "
")
}

추가로 첨부된 hasOwnProperty 사용 예는 인터넷에서 가져온 것입니다.

코드 복사 코드는 다음과 같습니다.

 
펑션북(제목, 저자) { 
this.title = title; 
this.author = 작성자; 
} 
Book.prototype.price = 9.99; 
Object.prototype.copyright = "herongyang.com"; 
var myBook = new Book("JavaScript Tutorials", "헤롱 양"); 
// 기본 프로토타입 수준에서 내장 속성 덤프 
document.writeln("/nObject.prototype's 내장 속성:"); 
dumpProperty(Object.prototype, "생성자"); 
dumpProperty(Object.prototype, "hasOwnProperty"); 
dumpProperty(Object.prototype, "isPrototypeOf"); 
dumpProperty(Object.prototype, "toString"); 
dumpProperty(Object.prototype, "valueOf"); 
dumpProperty(Object.prototype, "저작권"); 
// 내 프로토타입 수준에서 내장 속성 덤프 
document.writeln("/n==================/nBook.prototype의 내장 속성 속성:"); 
dumpProperty(Book.prototype, "생성자"); 
dumpProperty(Book.prototype, "hasOwnProperty"); 
dumpProperty(Book.prototype, "isPrototypeOf"); 
dumpProperty(Book.prototype, "toString"); 
dumpProperty(Book.prototype, "valueOf"); 
dumpProperty(Book.prototype, "저작권"); 
// 객체 수준에서 내장 속성 덤프 
document.writeln("/n==================/nmyBook의 내장 속성:" ); 
dumpProperty(myBook, "생성자"); 
dumpProperty(myBook, "hasOwnProperty"); 
dumpProperty(myBook, "isPrototypeOf"); 
dumpProperty(myBook, "toString"); 
dumpProperty(myBook, "valueOf"); 
dumpProperty(myBook, "저작권"); 
function dumpProperty(object, property) { 
var 상속; 
if (object.hasOwnProperty(property)) 
inheritance = "Local"; 
else 
상속 = "상속됨"; 
document.writeln(property ": " 상속 ": " 
 object[property]); 
} 

查看浏览器支持javascript到哪个版本：

复主代码代码如下:

<머리>

JavaScript版本支持测试

<본문>
<스크립트 언어="JavaScript">
//document.write("您的浏览器类型：" navigator.appName "
");
//document.write("浏览器版本：" navigator.appVersion "
");
//支持JavaScript1.0적 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.0
');

<스크립트 언어="JavaScript1.1">
//支持JavaScript1.1적 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.1
');

<스크립트 언어="JavaScript1.2">
//支持JavaScript1.2의 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.2
');

<스크립트 언어="JavaScript1.3">
//支持JavaScript1.3의 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.3
');

<스크립트 언어="JavaScript1.4">
//支持JavaScript1.4의 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.4
');

<스크립트 언어="JavaScript1.5">
//支持JavaScript1.5의 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.5
');

<스크립트 언어="JavaScript1.6">
//支持JavaScript1.6의 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.6
');

<스크립트 언어="JavaScript1.7">
//支持JavaScript1.7적 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.7
');

<스크립트 언어="JavaScript1.8">
//支持JavaScript 1.8적 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.8
');

<스크립트 언어="JavaScript1.9">
//支持JavaScript1.9적 浏览器才能够执行该脚本
document.write('该浏览器支持JavaScript1.9
');