FC2ブログ

JavaScriptのthisにハマる

昨日作ったJavaScriptにちょっと機能追加した。
ソース内に直接記述していたパラメータを、Webページのテキストボックスから入力するようにしただけ。
ついでに共通処理をメソッドにしたので、結構時間がかかった。

デバッグしようとしたら、Firebugがjsファイルを読み込まない。
ちょっと悩んだが、ブラウザでJavaScriptを無効にしていただけだった。
こんなので悩みたくないので、<noscript>タグを追加して、赤太字でJavaScript無効を表示するようにした。

再利用を考慮するほどのコードでは無いが、一応JavaScriptのfunctionをすべてオブジェクト内に記述している。
共通定数をプロパティとしてまとめたところ、window.onload で実行されるfunctionの動きがおかしくなった。
共通定数を this.定数名 と記述していたが、thisがfunctionを記述したオブジェクトを指していないのだ。

例によって、ネットで調べたところすぐに解決。
obj2.func = obj1.func;
のように、オブジェクト内のメソッドは他のオブジェクトにコピーできる。
addEventListener/attachEventの引数に設定した場合も、同様にコピーされる。
window.addEventListener("load", obj1.func, false);
とした場合、onload時に実行されるのは obj1.func では無く window.func になり、function内のthisはwindowオブジェクトを指す。

そこで、addEventListener/attachEventの引数に直接functionを設定せずに、ワンクッション置くことにした。
var listner = function(){ obj1.func(); };
window.addEventListener("load", listner, false);
こうすればobj1のメソッドだけがコピーされることは無い。
イベントリスナ周りを記述するときは注意しよう。すぐ忘れそうな気がするが。

作ったJavaScriptコードはちゃんと動いたが、実用的では無いので明日続きをやろう。
早くスタイルシートの勉強に入りたいのだが。

<2010-06-29 追記>
var listner = function(){ obj1.func(); };
のような無名関数を使用する場合の注意点と、それを考慮したソースをこのページに書いた。
スポンサーサイト



コメント

コメントの投稿

非公開コメント

プロフィール

himax64

Author: 南西
30代後半の無職です。
就活もせずダラダラ生きてます。
作ったもの

最新記事
人気記事
検索フォーム
カテゴリ
月別アーカイブ
最新コメント
最新トラックバック
RSSリンクの表示
QRコード
QRコード
カウンター