イベントハンドラとthisキーワード

thisって何でぃすか？

すいません！
言ってみたかったんです＞＜

thisが参照するものは呼び出し元のオブジェクトです。
簡単な例をあげると

// 人間クラス　←ありがち
// プロトタイプは省略
function Human( firstName, lastName ){
    this.firstName = firstName;
    this.lastName = lastName;
    this.SayMyName = function(){
        alert( "My name is " + this.lastName + " " + this.firstName + "." );
    };
}

var cimadai = new Human( "shimada", "daisuke" );
cimadai.SayMyName(); // この関数を呼び出した時に、SayMyNameの中では
// 呼び出し元[cimadai(Humanクラスのインスタンス)]のfirstNameとlastNameを参照している。

オブジェクトとして考えたら全然普通ですね。
次は僕がthisにしてやられたところ。

イベントハンドラとthisキーワード

thisは呼び出しもとのオブジェクトを参照するといいました。
という事は、
イベント時に何かのオブジェクトの関数を呼び出したいっていう場合、ややこしやーになります。
例えば上のクラスをそのまま使うと↓

// 人間クラス　←ありがち
function Human( firstName, lastName ){
    this.firstName = firstName;
    this.lastName = lastName;
    this.SayMyName = function(){
        alert( "My name is " + this.lastName + " " + this.firstName + "." );
    };
}

// jQuery使用してます
$(function($){
    var cimadai = new Human( "shimada", "daisuke" ); // Humanクラスのインスタンスを作る
    
    // <input type="button" value="自己紹介" id="selfIntro" />のエレメントの
    // クリックイベントでcimadaiインスタンスのSayMyNameを使いたい場合
    /*[1]*/$("#selfIntro").bind("click", cimadai.SayMyName ); // こうすると「"My name is undefine undefine."」になる
    /*[2]*/$("#selfIntro").bind("click", function(){ cimadai.SayMyName(); } ); // こうすると「"My name is daisuke shimada."」になる
});

という事で、selfIntro のイベントで「cimadai.SayMyName」をそのまま渡すと buttonオブジェクトの
「SayMyName」になってしまうのです。
これは[1]で「cimadaiオブジェクト "の" SayMyName」を渡しているように見えて実は
「cimadaiオブジェクト "が持っている" SayMyName という関数の参照」を渡しているだけなんですね＞＜

だから「this」が指すものも[1]と[2]で違います。
[1]は buttonオブジェクト
[2]は cimadaiオブジェクト
んー、ややこしやー

JavaScriptの特性を考えるととても納得行くのですが、はじめは引っかかっりました＞＜