javascriptコールバック関数内の "this"キーワード

Question

私はこの "キーワード"についてよく理解していますが、何らかの理由でこの特定のケースで私を引き留めています。 bindEventsメソッドの中で、フォームにsubmitイベントをバインドすると、fetchTweetsが実行されます。私はそれが "on"メソッドのコールバック関数の内部にあるので、 "this"は親オブジェクト "Tweets"ではなく、イベントがバインドされたフォームを参照するようになりました。

私は、後でコールバックで問題を起こさないように親オブジェクトをキャッシュするために、メソッドの先頭にself = thisを宣言するのが一般的であると考えていましたが、この場合は機能しません。そのメソッドは、フォーム提出イベントのコールバック関数になります。

私は、この場合には、それらを使用する必要があった場合、私はちょうど思っていた、または私は何かを明らかに欠けている場合、は.callについて知っていると.applyとさえ$ .proxy。私はこのコードを$ .proxyを使って動作させていますが、私はちょうどそれについてもっとスマートな方法があると思っていました。

var Tweets = { 

    init: function (config) { 
     var self = this; 
     self.config = config; 
     self.url = 'http://search.twitter.com/search.json?callback=?'; 
     self.bindEvents(); 
    }, 

    bindEvents: function() { 
     var self = this; 
     // bind events as needed 
     self.config.form.on('submit', self.fetchTweets); 
    }, 

    fetchTweets: function(e) { 
     e.preventDefault(); 
     var self = this; 
     var term = self.config.form.find('#term').val(); 

     // grab tweets from the server 
     $.getJSON(self.url, { q: term }, function(data) { 
      self.displayTweets(data); 
     }); 
    }, 

    displayTweets: function(data) { 
     var self = this; 
     var tweetList = self.config.list; 
     tweetList.empty(); 
     // append each tweet to the list 
     $.each(data.results, function(index, tweet){ 
      $('<li></li>').text(tweet.text).appendTo(tweetList); 
     }); 
    } 
}; 

Tweets.init({ 
    form: $('#getTweets'), 
    list: $('#tweets') 
}); 

Answer 1

代わりのself.<member>を使用して、Tweets.<member>を使用してみてください。 thisがすでにTweets以外のものであるので、あなたは、メソッド内var self = thisを行うことはできません。しかし、作成しているオブジェクトを参照する変数があるので、それを使うことができます。 :)

Answer 2

次のようにしても、匿名関数でイベントハンドラをラップすることができます：

self.config.form.on('submit', function(e) { self.fetchTweets(e); }); 

はその後ハンドラをバインドする方法以外の方法でvar self = this;をしません。 thisを使用しても安全です。