ключевое слово "this" внутри функции обратного вызова javascript - PullRequest
Новая
       18

ключевое слово "this" внутри функции обратного вызова javascript

2 голосов
/ 01 марта 2012

Я хорошо понимаю ключевое слово "this", но по какой-то причине оно все еще сбивает меня с толку в этом конкретном случае.Внутри метода 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')
});

Ответы [ 2 ]

1 голос
/ 01 марта 2012

Вместо использования self.<member>, попробуйте использовать Tweets.<member>.Вы не можете сделать var self = this внутри метода, потому что this уже что-то отличное от Tweets.Но поскольку у вас есть переменная для ссылки на объект, который вы создаете, вы можете просто использовать это.:)

0 голосов
/ 01 марта 2012

Вы также можете обернуть ваш обработчик событий в анонимную функцию следующим образом: 

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

Тогда не делайте var self = this; ни в каком другом методе, кроме метода, связывающего обработчики.Безопасно использовать this.

...