jQueryのコールバック関数内の、thisコンテクストを指定する

ちょっとしたWebアプリをjQueryを使って書こうとすると、ときどきコールバック内でのthisの参照に悩まされることがあります。そんなときはfunction.bindや$.proxyが便利です。

こいつらを使えば、コールバック内で何をthisとして使うのかを指定することが出来ます。

person

var person = {
    name:"taro",
    getName:function(){
        console.log(this.name);
    }
}

bind

$("#el").on("click",person.getName.bind(person)); // >> "taro"

proxy

$("#el").on("click",$.proxy(person,"getName")); // >> "taro"

たとえばこの場合、person.getNameをclickイベントのコールバック関数として渡し、その中でのthisコンテクストをpersonに指定しています。どっちもやっていることは同じですが、proxyの方は「どんなオブジェクトが何をするか」みたいな雰囲気の書き方ができます。proxyは他にも書き方ありますので、それについては jQueryの公式docをご参照ください。

通常、thisの参照はクリックされたDOM要素を指します。

usual

$("#el").on("click",person.getName); // >> undefined

そのため、this.nameは見つからず、undefinedが返されてしまいます。

こんな例を出しといてアレですが、僕の場合はいつもBackbone.js使ってしまうので、正直DOM回りではあまり使う機会はありません。でも$.ajax()のときなんかは使えると思います。 var that = this;って書き方は、なるべくしたくないのです。