01 | 2017/03 |  03

  1. 無料サーバー

User forum-FC2BLOG-Info-Edit Template-Post-Edit-Upload-LogOut

CSSやJavascript自習の苦闘史を綴っていきたい。恐縮ですがJavascriptを有効にしてご覧ください。
2005年12月から社会問題も掲載!

jQuery (ver 1.2.1) の object 拡張方法をやっと解明!

このエントリイの改訂履歴
  • 2007/08/15:初稿
  • 2009/3/6:改めて読んでみて懐かしくなり、部分的に追記/改訂

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

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

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

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

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

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

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

ここで難解だったのは、定義ではなく実行の場合の jQuery.extend() メソッドが、たった 1 つの引数しかとらない場合です。頻繁に登場する jQuery.extend() メソッドにおいて、その引数はたった 1 つのオブジェクトである場合が多く、他方、そのオブジェクトには、多数のキーと値をもつプロパティが定義されています。

さて、そのたった1つの引数を取る場合、while が効果的に働き、しかも jQuery.extend() メソッドのたった 1 つの引数であるオブジェクトの多数のプロパティが、そのキー名と一緒に target 配列に順番に代入されていることでした。( i がキー名であり prop[i] がプロパティの値 )

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

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

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

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

▲ToTop

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

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

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

2009/3/6追記:上記の記述は今から振り返れば、いかにも拙い内容となっています。この時点ではこの程度しか知識がなかったのだなぁ・・・と感慨に耽ってしまいました。

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

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

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

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

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

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

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

 

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

承認待ちコメント ()

このコメントは管理者の承認待ちです

● コメント ●

ご指摘感謝! (hkom)

ご指摘ありがとうございます。
単純ミスでした失礼しました。本文を訂正しておきました。
忙しい中、ありがとうございました。助かります。

● コメント ●

プリインクリメント、ポストインクリメント (kuroki)

こんにちは。
プリインクリメント、ポストインクリメントの意味が逆ではないかと思います。++aは処理の前(プリ)にインクリメント、a++は処理の後(ポスト)にインクリメント、の意味だと思います。

● コメント ●

貴重なコメントありがとうございます。 (hkom)

 ご指摘ありがとうございます。jQueryについてもっと勉強したいので、今後も折りに付けよろしくお願いします。
 さて、やはり私の解釈はまちがっていましたね。もしやそうかな++XではなくX++となっていることについて、もっと考えねばなりませんでした。検討過程をもっと詳細にチェックすべきでした。
 今後もよろしくお願いします。

● コメント ●

引数のインクリメントについて (chem)

こんにちは。
javascriptの勉強がてらに、hkomさん同様、jQueryを読解している者です。

prop=arguments[x++] では、prop = arguments[x] を実行したのち、x++されているようです。そのため while ループの1回目では prop に arguments[0] が代入され(た後にxが1となり)、prop は null でないので回ります。そして prop が持つプロパティの数だけ for 文が回ります。ですから、hkomさんの「存在しないarguments[1]を利用してarguments[0]のプロパティを取得している」という解釈は誤りかと思います。

そこを prop=arugments[++x] とすると、prop への代入の前に x がインクリメントされます。すると代入されるのは arguments[1] となり、これは null ですので、while ループは1回も回らなくなります。

試しに Firebugで
var i=0; alert(i++);
var j=0; alert(++j);
を実行してみると、納得できるかと思います。

■ コメントの投稿 ■

管理者にだけ表示を許可する

●トラックバック●

■トラックバックURLはこちら■
http://hkom.blog1.fc2.com/tb.php/535-0d2f8c6c

●参照元一覧●

<provided Fc2>
<provided i2i>

▲ToTop

 90%近いシェアを握っているインターネットエクスプローラの描画エンジンを利用したタブbrowser。沢山のタブbrowserがあるが、多機能、カスタマイズフリー、スクリプト利用等で一日の長がある。Gekkoエンジンへの対応も行われ、IEからの自立独立の方向に向かっている。2005年7月にはIE7が登場する見通しの中で、今後の発展が望まれる。

 多様なCSS作成支援機能を備えた、タグ入力式 HTML&CSS作成支援エディタ。スキンデザインもすっきりしている。テキストエディター上で作成するよりも確実で安全にタグ打ちが出来る。
文字コードを選べないのが欠点。

 StyleNote同様のタグ入力式 HTML&CSS 作成支援エディタ。長年使用してきたが現在StyleNoteに乗り換えつつある。

 クリップボード履歴情報を活用する為のソフト。画像まで履歴を取ってくれるのが嬉しい。このソフトを使わない日は絶対ない程に重宝し、愛用している。

 起動中のウィンドウの「コピーできない」説明文などの文字列を取得し、コピー可能な文字データにするツール。何かと便利。

 ストリーミングデータを保存することが出来るソフト。動画利用には不可欠なソフトだ。

 無料ながらレイヤー機能を有し、スクリプトによる拡張も可能な、sleipnir作者が提供している優れもの画像編集ソフト。

 画面キャプチャソフトと言えばこれに勝るものなし、ではないだろうか? 様々な取得方法を有しており、ブログ作成にもHomepage作成に不可欠だ。Jtrimと並んでWoodyBellsの作品。

 複数ファイルの同時編集は出来ないが、透過pngも作れる画像編集ソフト。
(以下当該サイトから抜粋)初心者にも簡単に操作が出来るフォトレタッチソフトです。多くの加工機能で画像に様々な効果を与えることができます。非常に軽快に動作するため、ストレスなく操作できます。

 Animation Gifファイルを作れる無料ソフト。

 キャプチャソフト。画面内にサイト全体が表示しきれない場合でも、これを使えば全体をキャプチャすることが出来る。

 画像処理。画像のフォーマット変換のみならず、色数やサイズ、圧縮率の変更まで一括処理できてしまう『BatchGOO!』は、大量の画像をまとめて処理したいときに大変便利なソフト。BMP, TIFF, JPEG, PCX, PNG の相互変換をはじめ、色数・サイズ・解像度の統一、JPEG圧縮率の調節など、ホームページ用の画像や携帯電話用の壁紙を揃えるのに抜群の相性を見せる。(Vectorの当該ソフト紹介頁より抜粋引用)

 名前から直ぐに想像が付くように画像のサイズを測るためのソフトだ。Homepage作成には欠かせない。2カラム、3カラムのレイアウトを行う場合に大変重宝する。

 ランチャーソフトは沢山あるが、中でもこれが一押しだ。2年以上使ってきたがその操作性には毎日満足している。これを使い始めてからデスクトップには一切のアイコンを表示することをやめてしまった。

 AdobeReader7によって、起動時間が長すぎるという長年のユーザーの不満はある程度解消した。そのためこの高速化ソフトは存在価値が低下してしまったかもしれない。AdobeReader6迄はこのソフトによる起動高速化で恩恵を受けてきた。

 IE専用が難点だが、様々なサイト内でIDやパスワードを入力するのに重宝するソフト。コンテキストメニューから簡単に起動できるのがGood! sleipnir等のIEの描画エンジンを利用しているブラウザでも使える。

 利用しているパソコンの諸元値を取得するには、このソフトがベストだ。インストール済みソフトの一覧が取得できるのも嬉しい。

 WMPは機能が豊富なだけ重い。RealPlayerも同様だ。そこでMedia Player Classicを使いたい。動作が軽快なだけではなく、対応しているファイル形式もすこぶる多く、これひとつで、wmvもrmも表示できてしまうのだから凄い! 数多あるMedia Playerの王様と言えるだろう。

 自宅でPCを起動しているときには必ず起動しているメディアプレーヤー。何かと過剰なWinampよりも、起動も速くスキンはシンプルだ。

 DivX, Xvid, Mov, Vob, Mpeg, Mpeg4, avi, wmv, dv, などの動画をDVD-Video形式に変換できるフリーソフト。クリックするとDVD関連ソフト紹介サイト=「DVDなToolたち」なるHomepageが開きます。

200708150056