jQueryのobject拡張方法をやっと解明！

• jQuery 関連エントリイ一覧 in this Blog

それは10日夜からの足かけ5日間の苦悩の末に突如開けた！

jQueryの使い方は簡単ですが、そのコードを理解することは私にとっては大変難しいものでした。そうなのです。過去の4日間、「どうしてあのようにしてobjectを拡張できるのだろうか？」───とずっと悶々としてきました。

それが極めて初歩的な方法ですが、jQueryのコードの中で分かりにくい箇所にalert関数を追加し、その進行過程を取りだし分析する、と言う方法で解明することが出来ました。嬉しい！！

ここでは解明できた、jQuery におけるobjectそのものの拡張方法について綴ってみようと思います。

まず苦闘してきたコードの該当箇所を抽出しておきます

それは次の2つのコードです。jQuery オブジェクト自身を拡張している箇所です。最初は、prototypeプロパティにおいて引数を操作し、かつそれをjQuery.extendメソッドに複写しています。

次にこの複写されたjQuery.extendメソッドを、無名オブジェクトつまり{name1:func1,name2:func2,……}をたった一つの引数として定義し、実行しています。

理解に苦しんだjQueryのオブジェクト拡張

jQuery.extend = jQuery.prototype.extend = function() { // copy reference to target object var target = arguments[0], a = 1; // extend jQuery itself if only one argument is passed if ( arguments.length == 1 ) { target = this; a = 0; } var prop; while ( (prop = arguments[a++]) != null ) // Extend the base object for ( var i in prop ){ target[i] = prop[i]; } return target; }; jQuery.extend({name1:func1,name2:func2,……});

ここで難解だったのは、jQuery.extendメソッドがたった一つの引数（その引数オブジェクトは多数のキーと値をもつプロパティが定義されてはいるが、jQuery.extendメソッドの引数はあくまでもたった1つの無名オブジェクト　{}　だけです）しかとらない場合でも、prototypeプロパティ定義部の、whileが有効に働き、しかも jQuery.extendメソッドのたった一つの引数となったオブジェクトに定義されている多数のプロパティが、そのキー名と一緒にtarget配列に順番に代入されていることでした。（iがキー名でありprop[i]がプロパティの値となっています。）

この時点ではまだx++と++Xの差異について極めて初歩的なことであるにも拘わらず認識していませんでした。その結果次の段のような疑問を持ってしまったのです。以下打ち消し線部分はx++の動作について誤った認識をしていた時点で書いてもので、明らかに内容が間違っていることを示しています。

引数オブジェクトの中のプロパティのキー名と値をargumentsオブジェクトを利用して取りだしているわけで、どうしてこんなことが出来るのだろうか、ずっと頭を悩ましていました。

しかし、いくらコードを睨み付けて思案してみても、解明できるほどの知識はありません。

そこでalertをjQuery.jsのあちこちに挿入し、動く過程をチェックしてみました。

▲ToTop

そして分かったのです。argumentsオブジェクトの独特の利用法が！

引数オブジェクトの中に定義されているプロパティを、次の部分のコードによって巧みに取りだしているということ、及びその取り出し方が理解できたのです。

property抽出部

var prop; while ( (prop = arguments[a++]) != null ) // Extend the base object for ( var i in prop ){ target[i] = prop[i]; }

それはこれまでに遭遇したことのないargumentsオブジェクトの使い方であり、極めて独創的に思えました。Javascript1.5なり1.6なりで新たに定義され拡張されたargumentsの仕様なのかどうか、皆目知りませんが、こうした方法で引数オブジェクト内のプロパティを抽出できることは大変な驚きでした。

for in　ループによってオブジェクト内のプロパティを順番に取り出すこの方法は、何のことはない、prototype.jsにも使われているありきたりのコードでした。

早速例題を作ってみました。

それは以下のような短いコードです。

動作確認用の自作コード

//5つのプロパティを持つオブジェクトを作成 var obj = {"1":"abc","2":"def","3":"hij","4":"klm","5":"opq"}; //オブジェクト内のプロパティを取り出す function test(){ alert(arguments[0]); var x =0; var prop; while ( (prop=arguments[x++]) !=null ) for (var i in prop) alert("x : " + x + " key : " + i+ " value : " +prop[i]); }//関数を実行 test(obj);

上のコードをfirebugでテストしてみた所、最初にarguments[0]がオブジェクトとしてalertされ、続いてobjの5つのプロパティのキー名と値、並びにxの値（5回とも1でした）が順番にalertされたのです。

こうして存在しない2番目の引数（arguments[1]）を利用して、arguments[0]オブジェクト内のプロパティを取りだしていることが理解できました。

どうしてこのような動作が可能となっているのかはargumentsオブジェクトの仕様上の問題かな、と思いつつ釈然としないままに、一応jQueryのオブジェクト拡張方法を何とか理解したのでした。

コメントによる指摘を戴くまでは、頭からa++をインクリメントしてから代入すると決めてかかっていました。ポストインクリメントというらしいのですが（++aはプリインクリメントと呼ぶらしい）、これまでさんざん forループ内でi++を使ってきたにも拘わらず、プリインクリメントと勘違いして頭を悩ましてしまったのでした。 (☆-◎;)ガーン ！