Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

ちょっとした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;って書き方は、なるべくしたくないのです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした