js_javascript 기술에서 for in의 결함에 대한 간략한 분석

for in 문은 다음과 같이 객체의 속성(구성원)을 나열하는 데 사용됩니다.

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

var obj = { name: "jack" ,
getName:function(){return this.name}
};
//출력 이름, getName
for(var atr in obj) {
Alert(atr);
}

obj의 toString, valueOf 및 기타 기본 제공 속성(또는 기본 제공 멤버, 숨겨진 속성 및 미리 정의된 속성)이 출력되지 않는다는 점을 알고 계셨나요? 즉, for in은 개체의 표시된 멤버(사용자 지정 멤버)를 열거하는 데 사용됩니다.

내장 속성을 재정의하는 경우 obj의 toString을 다시 작성하세요

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

var obj = {name:"jack" ,
getName:function(){return this.name},
toString:function(){return "나는 잭입니다."}
}
for(var atr in obj) {
경보(atr);
}

무엇이 출력되나요?
1. IE6/7/8에서는 toString을 다시 작성하지 않은 것과 동일합니다.
IE9/Firefox/Chrome/Opera/Safari에서는 이름 getName을 출력합니다. 문자열

내장된 프로토타입에 속성/메서드를 추가하면 for in 동안에도 순회할 수 있습니다.

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

Object.prototype.clone = function() {}
var obj = {
이름: 'jack',
나이: 33
}
// 이름, 나이, 클론
for (var n in obj) {
경보(n)
}

Object.prototype에 clone 메소드를 추가했으며, 모든 브라우저는 in 시 복제를 표시합니다.

일반적으로 내장 생성자의 프로토타입을 확장하는 것은 권장되지 않기 때문에 이는 큰 문제가 아닐 수 있습니다. 이는 Prototype.js가 쇠퇴하는 이유 중 하나이기도 합니다. jQuery와 Underscore는 자체 프로토타입을 확장하지 않습니다. 전자는 jQuery 객체에 대해 소란을 피우는 반면 후자는 단순히 밑줄 아래에 모든 메서드를 중단합니다.

그러나 때로는 ES5 이하 버전과의 호환성을 위해 ES5(IE6/7/8)를 지원하지 않는 브라우저에서 내장 생성자의 프로토타입을 확장할 예정입니다. 브라우저마다 다릅니다. 다음과 같이

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

if (!Function.prototype.bind) {
Function.prototype.bind = function(scope) {
var fn = this
return function () {
fn.apply(scope, 인수)
}
}
}
function Greeting(name) {
Alert(this.greet ', ' name)
}
for (var n in Greeting) {
Alert(n)
}

IE6/7/8 출력은 바인딩되지만 다른 브라우저는 바인딩하지 않습니다. 바인딩은 최신 브라우저에서 기본적으로 지원되고 in은 사용할 수 없기 때문에 IE6/7/8은 Function.prototype에 바인딩을 추가합니다.

요약하자면, 크로스 브라우저 디자인에서는 일반적으로 hasOwnProperty를 사용하여 객체의 멤버 이름을 얻을 수 없습니다.