> 웹 프론트엔드 > JS 튜토리얼 > Javascript_javascript 팁에서 for in 루프 및 hasOwnProperty 사용

Javascript_javascript 팁에서 for in 루프 및 hasOwnProperty 사용

WBOY
풀어 주다: 2016-05-16 17:32:46
원래의
1521명이 탐색했습니다.

in 연산자와 비교하여 for in은 객체의 속성을 반복할 때 프로토타입 체인을 순회합니다. For in은 배열의 길이 속성과 같은 열거할 수 없는 속성을 읽지 않습니다. 요약: 객체에 특정 속성이 있는지 감지할 때 hasOwnProperty는 이 작업을 완료할 수 있는 유일한 메서드입니다. for in 루프에서 판단을 위해 hasOwnProperty를 추가하는 것이 좋습니다. 이는 로컬 프로토타입 확장으로 인해 발생하는 오류를 효과적으로 방지할 수 있습니다.

in 연산자와 비교하여 for in은 객체의 속성을 반복할 때 프로토타입 체인을 순회합니다. for in은 배열의 길이 속성과 같은 열거할 수 없는 속성을 읽지 않습니다.

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

// Extend Object.prototype
Object.prototype.bar = 1;
var foo = {moo: 2};
for(var i in foo) {
console.log(i);
}


for in 루프의 동작을 변경할 수 없습니다. 루프 본문에서 특정 속성을 필터링해야 하는 경우 Object.prototype의 hasOwnProperty 메서드를 사용할 수 있습니다. 완료하세요.

팁: for in 루프는 항상 전체 프로토타입 체인을 순회하므로 여러 상속된 객체를 순회할 때는 효율성이 떨어집니다.

hasOwnProperty를 사용하여 필터링

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

// 위 예에서는 여전히 foo 객체를 대상으로 하고 있습니다.
for (var i in foo) {
if (foo.hasOwnProperty(i)) {
console.log(i); 🎜>}
}


예제에서는 hasOwnProperty가 사용되었기 때문에 결국 moo가 출력됩니다. hasOwnProperty가 무시되면 코드는 예상치 못한 결과를 출력합니다. Object.prototype)이 확장되었습니다.

Prototype 프레임워크는 Javascript 원본 객체를 확장한 클래스 라이브러리로 널리 사용됩니다. 프레임워크 도입 시 필터링 및 판단을 위해 hasOwnProperty를 사용하지 않으면 출력 결과는 다음과 같습니다. 당신이 원하는 것이 아니라는 것을 보장합니다.

모범 사례

입력 시 항상 hasOwnProperty를 사용하여 판단하는 것이 좋습니다. 실행 중인 코드 환경이 오염되었는지 여부는 누구도 보장할 수 없습니다.

hasOwnProperty
객체에 프로토타입 체인에 없는 사용자 정의 속성이 있는지 확인하려면 hasOwnProperty 메서드를 사용해야 합니다. 이 메서드는 Object.prototype에서 상속됩니다. .

팁: 속성이 존재할 수 있지만 해당 값이 정의되지 않았기 때문에 속성이 정의되지 않았는지 여부를 완전히 감지할 수 없습니다. hasOwnProperty는 프로토타입 체인을 순회하지 않고 개체 속성을 처리할 수 있는 Javascript의 유일한 메서드입니다.


코드 복사 코드는 다음과 같습니다.
// Extend Object.prototype
Object.prototype.bar = 1;
var foo = {goo: 정의되지 않음};

foo.bar; // 1
'bar' // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true


hasOwnProperty만이 올바른 예상 결과를 제공합니다. , 이는 객체의 속성을 반복할 때 필요합니다. 객체의 프로토타입 체인에 정의된 속성을 제외할 수 있는 다른 방법은 없습니다.

속성으로서의 hasOwnProperty

Javascript는 hasOwnProperty를 키워드나 예약어로 보호하지 않으므로 객체에 동일한 이름의 속성이 있는 경우 확장된 hasOwnProperty를 사용하여 올바른 결과.


코드 복사 코드는 다음과 같습니다.
var foo = {
hasOwnProperty: function() {
return false;
},
bar: 'Here be Dragons'
};
foo.hasOwnProperty('bar'); // 항상 false를 반환합니다.
// 다른 hasOwnProperty를 사용하여 호출하고 이를 foo로 설정
{}.hasOwnProperty.call(foo, 'bar') // true


요약
객체에 특정 속성이 있는지 감지할 때 이 작업을 완료할 수 있는 유일한 메서드는 hasOwnProperty입니다. for in 루프에서 판단을 위해 hasOwnProperty를 추가하는 것이 좋습니다. 이는 로컬 프로토타입 확장으로 인해 발생하는 오류를 효과적으로 방지할 수 있습니다.
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿