여러 browser_javascript 기술에서 JavaScript for 루프를 사용하는 방법

1. 서문
JavaScript 언어는 브라우저마다 약간의 차이가 있지만 DOM 연산의 차이만큼 크지는 않습니다. 이제 "for 루프"의 차이점 중 하나를 나열하겠습니다. 그리고 이러한 차이를 효과적으로 해결하는 방법을 소개합니다.

2. 문제 설명
다음 테스트 코드 예시 1에서 IE6과 Chrome의 출력 결과가 일치하지 않습니다.

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

//예제 1:
alert("Prepare toString이 for 루프 Enumerated out에 있는지 테스트합니다.")
var forTest = { toString: 1 }
for (i in forTest) {
alert("toString is looped out")//이것은 IE6에서는 실행되지 않지만 Chrome에서 실행하면 결과값 "1"이 출력됩니다.
}

3. 분석 문제
JavaScript의 개체에 'toString'이 포함되어 있습니다. , 'valueOf', 'isPrototypeOf', 'propertyIsEnumerable', 'toLocaleString', 'hasOwnProperty', 'constructor'는 7개의 내장 메서드입니다. 이러한 7가지 내장 메서드는 for 문을 사용하여 열거할 수 없습니다. 그러나 IE6과 Chrome은 내장 메서드 재정의에 대해 일관되지 않은 지원을 제공합니다.
IE6: 내장된 재정의 방법을 사용할 수 있지만 FOR 루프를 열거할 수 없습니다.
Chrome: 내장 메서드를 재정의할 수 있으며 FOR 루프는 재정의된 내장 메서드를 열거할 수도 있습니다.
그래서 위의 테스트 코드 예시 1에서 IE6과 Chrome 브라우저의 출력 결과가 일치하지 않습니다

4. 문제 해결
위에서 설명한 문제를 해결하려면 다음이 필요합니다.
사용자가 사용하는 브라우저가 재정의된 내장 메서드를 열거하기 위해 FOR 루프를 지원하는지 여부
모든 브라우저가 FOR 루프에서 재정의된 내장 메서드를 열거할 수 있도록 비호환성 문제를 우아하게 해결하는 방법
(솔루션 코드 예시 2)

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

//예제 2 ：
enumerables = true,
forTest = { toString: 1 }
for (i in forTest) {
enumerables = null
}
if (열거 가능) {//이것들은 모두 Object 개체의 속성입니다. 일부 브라우저(예: 6)의 for 루프는 이러한 속성을 순회하지 않으므로
enumerables = ['hasOwnProperty', 'valueOf', ' isPrototypeOf', 'propertyIsEnumerable',
'toLocaleString', 'toString', 'constructor'];
}

//enumerables가 null인 경우 브라우저는 다음의 내장 메서드를 지원합니다. 열거형 재정의, 그렇지 않으면 다음 코드에 표시된 대로 기본 제공 메서드를 새 개체에 강제로 복사할 수만 있습니다.
/**
* 모든 속성을 지정된 객체에 복사
* @param {Object} 병합할 객체 객체
* @param {Object} config 소스 속성
* @return {Object} 병합된 객체를 반환
*/
function apply(object, config) {
if (object && config && typeof config === 'object') {
var i, j, k ;
//여기에 개체를 복사하는 일반적인 방법
for (i in config) {
object[i] = config[i];
}//여러 브라우저와 호환 가능 -in 속성을 새 객체에 복사할 수 있습니다.
if (enumerables) {
for (j = enumerables.length; j--;) {
k = enumerables[j]
if (config .hasOwnProperty(k)) {//객체에 특정 속성이 있는지 확인합니다. 이 속성은 문자열로 지정되어야 합니다. (예: config.hasOwnProperty("toString"))
object[k] = config[k];
}
}
}
}
return object; > };


이제 결과를 검증하기 위한 테스트 코드를 작성합니다(테스트 코드 예 3)

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

//예제 3:

var a={};
for (i in forTest) {
a[i] = forTest[ i];
}
alert(a.toString) //ie6에서 복사가 실패하면 덮어쓴 값이 아닌 "네이티브 코드"만 입력할 수 있습니다.
var b=apply ({},forTest)
alert(b.toString)//apply 함수를 사용하여 IE6 및 Chrome에서 출력되는 값은 "1"을 예상하는 적용 범위 값입니다.

5. 요약
저자는 IE6의 for 문이 해당 7개의 내장 함수를 무시 목록에 표시하므로 덮어쓰더라도 열거할 수 없다고 추측합니다. 덮어쓴 내장 함수를 복사합니다. 다양한 브라우저에서 for 루프 불일치 문제를 해결하려면 솔루션 코드 예제 2의 적용 기능을 사용하세요.
작가는 초보이고 블로그 글을 거의 작성하지 않습니다. 만약 제 의견이 잘못 표현되었거나 사무적인 오류가 있을 경우 기꺼이 전문가에게 수정을 요청하시기 바랍니다.


6. 자주 묻는 질문
Q: 먼저 브라우저 버전이 IE6인지 확인한 다음 해당 열거 방식을 설정하면 어떨까요? 답: 제 개인적인 견해로는 시중에 브라우저가 그렇게 많은지 잘 모르겠습니다(PC용 N브라우저도 있고, 모바일 브라우저도 있고, 어떤 새로운 버전의 브라우저가 나올지는 모르겠습니다). 앞으로는 사용할 수 있게 될 것입니다. for 문에는 어떤 메커니즘이 사용됩니까? 먼저 for 문의 메커니즘을 테스트해 보겠습니다.