document.getElementById Introduction_javascript 기술

당신의 두뇌를 브라우저로 생각하고 다음 코드를 각각 IE6과 IE9 두 번 실행하십시오.

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

function testFunc(){
alert('test')
}
$(function(){
var g = document.getElementById ,
w = window.testFunc;
//g
alert(typeof(g));
alert(g 인스턴스ofObject); g 인스턴스of 함수 ); 함수);
alert(g('t'));
w()
});


FF , chrome 등) 위의 코드는 매우 일관되게 실행되며 반환 결과는 다음과 같습니다.
typeof => "function"




코드 복사

코드는 다음과 같습니다.

String => "function #funcName#{[native code]}" instanceof Object => true instanceof Function => true 이상한 것은 유형이 함수임에도 불구하고 함수 g를 실행하기 위해 대괄호를 직접 사용할 수는 없지만 call

g.call(document ,elementId)
그러나 실행 환경이 IE6인 경우 모든 것이 매우 이상해 보입니다. 실행 결과는 다음과 같습니다(굵은 부분 참고).

code


코드는 다음과 같습니다.

//g typeof => "object" String => 네이티브 코드]}" instanceof Object => false instanceof Function => false //w

typeof => "function"

String => "function testFunc{ Alert('test')}"
instanceof Object => ; true
instanceof Function => true



IE 6에서는 g와 w 모두에 대해 다음만 수행할 수 있습니다. 호출을 사용하지 않고 함수를 직접 실행하려면 대괄호를 사용하세요. 다음 메소드를 사용하여 함수 g를 호출하면 "객체에 이 속성이 없습니다."라는 오류가 발생합니다.
g.call(document,eleId)
IE6에서는 테스트 결과에 문제가 없습니다. 사용자 정의 함수 testFunc. 하지만 g에게는 매우 이상합니다!

g는 객체인데 왜 함수처럼 ()를 이용해 직접 호출하고 실행할 수 있나요?
표준 브라우저에서는 g가 함수인데 왜 ()를 이용해 직접 실행할 수 없나요?

사실 document.getElementById의 경우 함수든 객체든 jQuery 1.6.2에서도 이 문제는 해결되지 않습니다.
$.isFunction(g)은 IE6에서 여전히 false를 반환합니다. 다음은 jQuery 1.6.2의 jQuery.isFunction 관련 소스 코드입니다.





코드 복사


코드는 다음과 같습니다.

class2type={}; ... // class2type 맵 채우기 jQuery .each ("부울 숫자 문자열 함수 배열 날짜 RegExp Object".split(" "), function(i, name) { class2type[ "[object " name "]" ] = name.toLowerCase(); } );

...

type: function( obj ) {
return obj == null ?
String( obj ) :
class2type[ Object.prototype.toString.call( obj) ] || "객체";
},
...
isFunction: function( obj ) {
return jQuery.type(obj) === "함수"
}

그래서 StackOverflow에 이런 질문을 올렸는데요. 다행히 좋은 분들이 많아 빠르게 답변해 주셨네요. 마지막으로 참고할 수 있도록 간략하게 요약하겠습니다.
document.getElementById는 원래 HTMLDocument(HTML DOM) 인터페이스의 멤버로 정의되었으나 나중에 레벨 2 DOM의 Document(XML DOM) 인터페이스로 이동되었습니다.
document.getElementById는 호스트 객체에 속하며 함수이지만 ECMAScript에 정의되지 않고 DOM 인터페이스의 일부입니다.
[[Call]] 지원(내부 속성?) 호스트 개체의 typeof 반환 값은 함수입니다. 호스트 개체는 typeof와 같은 기본 개체와 관련된 규칙을 항상 따르지는 않는다는 점을 기억하세요.
testFunc의 경우 이는 기본 객체, 더 구체적으로는 기본 함수입니다.
다음은 EcmaScript 5에서 typeof 연산자의 반환 결과를 분류한 것입니다.

TABLE>따라서 document.getElementById 대신 $를 사용하려면 다음을 수행해야 합니다. 코드 복사 코드는 다음과 같습니다. var $ = function(id) { return document.getElementById(g) }; 그러나 위의 설명 후에도 여전히 호스트 개체 및 기본 개체에 대한 질문이 있습니다.

Type of val	Result
Undefined	<strong>"undefined"</strong>
Null	<strong>"object"</strong>
Boolean	<strong>"boolean"</strong>
Number	<strong>"number"</strong>
String	<strong>"string"</strong>
Object (native and does not implement [[Call]])	<strong>"object"</strong>
Object (native or host and does implement [[Call]])	<strong>"function"</strong>
Object (host and does not implement [[Call]])	Implementation-defined except may not be <strong>"undefined"</strong>, <strong>"boolean"</strong>, <strong>"number</strong>", or<strong> "string".</strong>

val유형 >

결과

정의되지 않음

<strong>"정의되지 않음"</strong>

무효

<strong>"개체"</strong>

부울

<strong>"부울"</strong>

숫자

<strong>"숫자"</strong>

문자열

<strong>"문자열"</strong>

객체(네이티브이며 [[Call]]을 구현하지 않음)

<strong>"개체"</strong>

객체(네이티브 또는 호스트이며 [[Call]]을 구현함)

<strong>"함수"</strong>

객체([[Call]]을 호스트하고 구현하지 않음)

<strong>"정의되지 않음"</strong>, <strong>"부울"</strong>, "숫자" 또는 <strong> "문자열".</strong>