Question

我对“this”关键字有一个很好的理解，但由于某种原因，它仍然在这个特定情况下绊倒我。在bindEvents方法中，当我将submit事件绑定到表单时，它然后执行fetchTweets。我知道现在它在“on”方法的回调函数中，所以“this”现在指的是事件绑定的形式，而不是父对象“Tweets”。

我的理解是，通常的做法是在方法的顶部声明self = this来缓存父对象以防止以后的回调问题，但是在这种情况下它不起作用，因为它的唯一目的是method是表单提交事件的回调函数。

我知道.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>。您无法在方法中执行var self = this，因为this已经不是Tweets。但是，由于您有一个变量来引用您正在创建的对象，因此您可以使用它。：）

Answer 2

您还可以将事件处理程序包装在匿名函数中，如下所示：

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

然后不要在绑定处理程序的方法之外的任何方法中执行var self = this;。使用this是安全的。

javascript回调函数中的“this”关键字

2 个答案: