初心者覚書JavaScript: thisのこと

というか何というか、プロパティやメソッドの使い方で、躓いた。
ある要素をクリックすることで、その見栄えが選択状態とわかるものへと変わるように、CSSの適用をJavaScriptで調節するというもの。最初はオンクリックの対象となる要素に直接onClickを書いていたが、JavaScriptが実現する機能はHTMLから完全に分離させたかったので、Element.onclickに関数を代入する方法で書いてみようと思った。
オンクリックの対象となる要素にはそれぞれ固有のidが割り振られており、現在選択されている要素のidは連想配列に入っているという状態。クリックしたときにidを照合して、クリックした要素のidと現在選択されている要素のidとが一致していなければ、連想配列に格納されているidをクリックした要素のidに変更する。CSSの適用は連想配列の内容によって決定される。というわけなので、Element.onclickに代入する関数では、そのElement.idを欲しがっているということになる。
HTMLに直接書く方法だと、

<lmnt id="id0001" onClick="hoge()">ホゲハゲ</lmnt>

とか書くし、あまつさえそのように書いていたときには

<lmnt id="id0001" onClick="hoge('id0001')">ホゲハゲ</lmnt>

と引数でidを書き込んでいてうまく動いていたので、それをそのまま

function hoge(m) {
  var elmntid = m;
  //その他、連想配列をゴニョゴニョしたりいろいろ
}
var lmnt = document.getElementByHogeHoge('hage');
var lmntid = lmnt.id;
lmnt.onclick = hoge(lmntid);

と書いて「動かないよママン」と泣いていた。
否、実際には、動いたとしても何かがおかしなことになっていたと思う。とにかく、idの認識がうまくいかない。
結局、

function hoge() {
  var lmntid = this.id;
  //その他、連想配列をゴニョゴニョしたりいろいろ
}
var lmnt = document.getElementByHogeHoge('hage');
lmnt.onclick = hoge();

というように、thisで該当要素を参照すればよかった。これを解決するに至ったのが、意味もわからず偶然this.idとか書いたからだ、というところがヘタレすぎて泣ける。あとから同じところにalert(this.id);とか書いて、実際にちゃんとlmntを返しているのを確認して、「へぇ〜」とか思った。
最初にthisのことを本で読んだときに、コンストラクタでクラスっぽく使うのを見て「すごいなぁ」と思った印象が強く焼きついていて、それ以上のことがよくわかっていなかった。これを書いて初めてメソッドで使う方向に目が行って、少し理解が深まった(のかなぁ…)。
※『http://d.hatena.ne.jp/hadzimme/』は、マンガのコラでお馴染みのフリーなターである私ことid:hadzimmeがヘタレど素人からロハスでソーシャルなスーパー・エログラマーへと変身するまでの壮絶なドラマを、準リアルタイムで書き綴るダイアりーです。