CoffeScriptを3時間で理解するための10のポイントのうち、ポイント8から10までを解説します。ポイント8は「変化するthisを追跡できる」こと、ポイント9は「クラス型オブジェクト指向に対応」していること、ポイント10は「jQueryなどの外部ライブラリも利用できる」ことです。
POINT8 変化するthisを追跡できる
★「自分自身」にアクセスする「@」キーワード「=>」キーワードでthisの変化を防止できる
CoffeeScriptの「@」は、「自分自身」にアクセスするための機能を提供するキーワードで、その時どきの文脈によって指すものが変わるのが特徴です。JavaScriptのthisキーワードに相当します。例えば、メソッド(コンストラクタ)の中では@はインスタンス自身を指しますし、イベントハンドラの中であればthisはイベントの発生元(要素ノード)を指します。
もっとも、この自在さゆえに、「@」は思わぬ混乱の原因にもなります。リスト37(Coffee Script)では、コンストラクタの中でイベントハンドラを定義しています。id="result"である要素をクリックしたときに、nameプロパティの値をもとに「こんにちは○さん!」というメッセージを表示することを意図したコードですが、結果は「こんにちは、undefinedさん!」となります。イベント発生元となる要素オブジェクトにnameプロパティがないので、undefined(未定義)が返されてしまうのです。

こうした場合、CoffeeScriptでは「->」ではなく「=>」で関数を定義します。これによって、関数の外側のthisをそのまま、関数の内側に引き継げるようになります。リスト37の赤い色を敷いた個所を「=>」に変更してみると、「こんにちは、山田さん!」と表示されるはずです。
コンパイル済みのJavaScriptコード(リスト38(JavaScript))を見てみましょう。イベントハンドラの外側で、現在のthisの内容を変数_thisに退避させています。この_thisにはイベントハンドラの中からもアクセスできますので、イベントハンドラの中ではthisではなく、_thisにアクセスしています。これはイベントハンドラの内外でthisを引き渡すための定番のコードです。
