jQueryに学ぶJavascriptの基礎(4) インスタンスオブジェクトからの値の取得について──jQuery解読(20)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。

しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。

for in object loop と継承プロパティ及び固有プロパティ

先に（ this 活用──jQuery解読(17) ）、for in loop でインスタンスオブジェクトのプロパティを総覧しました。ここでその総覧について考えてみます。

この loop ではオブジェクトが持つ全てのプロパティを列挙出来る訳ではありません（※）が、プロトタイプオブジェクトからの継承プロパティが列挙対象となることをここで再確認出来ました。しかしそれさえも ECMAScript による仕様ではプロトタイプチェーンは for in loop の調査対象外、とされているようですから、いずれはこの loop でプロトタイプから継承されたプロパティも取得できなくなるかも知れません。偶々 FireFox２ や IE７ では取得できますが・・・。

※　コードによって追加されたプロパティは列挙対象となるが、組み込みオブジェクトにあらかじめ定義されたプロパティ（例えば配列のメソッドなど）は通常は列挙できない。───Javascriptクィックリファランスp.101）。

さて、ここで何が問題かというと、$("a").size() あるいは $("a").length を実行すると当該サイトのリンクタグの個数が取得できますが、この場合の要素数に何故、プロトタイププロパティ＝継承プロパティが含まれないのだろうか、とふと疑問に思ったのです。しかし、継承プロパティは配列として格納されている訳ではないから、当然数えられないはずだ、と直ぐに納得しました。そして、そもそも継承プロパティは、恰もインスタンスオブジェクトのプロパティであるかのように見えているだけ（『Javascript第５版p.154』）で、決してコピーされている訳ではないことを、改めて思い起こしました。継承プロパティはインスタンスオブジェクトの固有のプロパティではないことを、期せずして再確認しました。

jQuery.js は何故配列形式で取得値をインスタンスオブジェクトに返すのか？

次に、 jQuery.js が処理値をインスタンスオブジェクトに配列形式で返すことの意味を考えてみました。

そしてその理由は、逆の場合を想定して直ぐに明らかになりました。つまり、配列にしないでノードのまま（テキストノードの場合を含む）で返すとすると、length で数を数えることが出来ません。また script によって、継承プロパティと返値であるプロパティを区別することも出来ないと思われます。

つまり、スクリプトによって取得したノード（値を含む）をスクリプトで自在に扱うためには、それを配列の中に取り込んで受け取ることが必要不可欠である、ということになります。

愚問のお陰で、改めて配列の重要性に思いを馳せました。

jQuery()関数を呼び出した直後のインスタンスオブジェクトの状態

さて、主題です。「インスタンスオブジェクトからどの様にしてその値を取り出すか」ですが、ユーザーから呼び出された直後のインスタンスオブジェクトの状態は下図のようになっています。インスタンス＝this は空の配列オブジェクトとして「出発」します。

左図は $("p") によって jQuery()関数を呼び出した直後の、init()メソッド内の変数の状態を示しています。

this（つまりインスタンスオブジェクト）は空の配列として定義され、変数 selector には文字 p が、その他の変数にはまだ値が付与されていません。

左図は 当該 this のプロパティを見たものです。

this＝インスタンスオブジェクトは、既に prototype オブジェクトから継承された沢山のプロパティをもっていることが分かります。

その後 jQuery.js 内の処理の結果、ユーザーが指示し目的とした要素ノードがインスタンスオブジェクトに返され、これがreturn連鎖を通じて最終的にユーザーが入力したAPIに返されます。

インスタンスオブジェクトの値を取り出す方法

以上を踏まえれば、返値であるインスタンスオブジェクトは配列オブジェクトなのですから、一般的な配列要素の取り出し方法によって、インスタンスオブジェクトの値を取り出すことが出来ます。

まず、jQuery,js のコード実行過程においては、 this[num] ( num は 0,1,2,･･･であり、コード進行過程の当該段階における取得要素数マイナス 1 まで有効 ) によって、インスタンスからDOMノードが取り出されるシーンがいくつもあります。

一方、ユーザーがインスタンスオブジェクトから値を取り出すには、配列に格納されている要素が DOM ノードであることをきちんと踏まえないといけません。

例えば、配列要素を文字列表示で一覧する join() メソッドではエラーとなります。DOMノードは直接文字列に変換できないからでしょう。また $("p").toString()では"[object Object]"しか返されません。

$("p")を例に取れば、コード進行過程と同様に、$("p")[num] で、配列に格納されているノードが取得出来ることは言うまでもありません。

この場合、例えば FireFox では [object HTMLParagraphElement]と、FireBugでは <p> と表示されます。

しかし、これでは具体性がありません。具体的に値を表示させたい場合には、
$("p")[0].nodeName、$("p")[0].firstChild 等の DOM プロパティを利用することにより、タグ名や内容等を取得することになります。

他方、jQuery()においてインスタンスオブジェクトを取り出す方法が提供されています。それはget()インスタンスメソッドです。

例えば $("p").get() によってjQuery("p")インスタンスを取り出すことが出来ます。但し配列として、と言う制限付きであり、かつその要素は String ではないのでalert("$('p').get()")などで取り出すことは出来ません。