document.getElementById 入門_JavaScript スキル

あなたの脳をブラウザと考えて、次のコードを 2 回 (それぞれ IE6 と IE9) 実行します:

コードをコピーします コードは次のとおりです。

function testFunc(){
alert('test')
}
$(function(){
var g = document.getElementById ,
w = window.testFunc;
//g
alert(string(g)); g インスタンスオブ関数 );
//w
alert(typeof(w));
alert(w インスタンスオブ オブジェクト); Function);
alert(g('t'));


を実行します (IE9、 FF、chrome など) 上記のコードは非常に一貫して実行され、戻り結果は次のとおりです:
typeof =>




コードをコピー

コードは次のとおりです:

String => "function #funcName#{[ネイティブ コード]}" 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 の両方で、次のことしかできません。 call を使用せずに関数を直接実行するには、括弧を使用します。次のメソッドを使用して関数 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 オブジェクト".split(" "), function(i, name) { class2type[ "[object " name "]" ] = name.toLowerCase(); } );

...

type: function( obj ) {
return obj == null ?
String( obj ) :
class2type[ Object.prototype.toString.call( obj) ] || "オブジェクト";
},
...
isFunction(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>"unknown"</strong>、<strong>"boolean"</strong>、「数値」、または<strong>「文字列」。</strong>