Javascript: Как получить доступ к члену объекта из функции обратного вызова события

Question

У меня проблемы с попыткой выяснить, что не так с моим дизайном объекта.

var comment = function(){
var textarea = null;
$(document).ready( init );

function init()
{
    $('.reply').click( comment.reply_to );
    this.textarea = $('.commentbox textarea');
    console.log( this.textarea );   // properly shows the textarea element
    console.log( textarea );        // outputs null
}

function set_text( the_text )
{
    console.log( textarea );        // outputs null
    console.log( this.textarea );   // outputs undefined
    textarea.val( the_text );
}

return {
    reply_to: function()
    {
        console.log( this );            // outputs the element who fired the event
        set_text( 'a test text' );      // properly gets called.
    }
};
}();

Когда документ полностью загружен, автоматически вызывается init () и инициализирует объект. Я должен отметить, что элемент textarea правильно указывает на нужный элемент. Событие click присоединяется к кнопке «reply», поэтому функция reply_to () вызывается всякий раз, когда пользователь нажимает на нее.

Итак, вот чего я не понимаю: * При использовании «это» безопасно? Используя его из reply_to (), это не так, так как кажется, что контекст установлен для элемента вызывающей стороны. * Почему я могу вызвать set_text () из reply_to, но не могу получить доступ к члену textarea? * Как мне сделать, чтобы получить доступ к элементу "textarea" из reply_to () (который является обратным вызовом события)?

Answer 1

Поскольку внутри этих обработчиков контекст изменится, проще всего сохранить ссылку на нужный вам контекст, лично я предпочитаю self. Вот один альтернативный формат:

var comment = function(){
    this.textarea = null;
    var self = this;
    $(document).ready( init );

    function init()
    {
        $('.reply').click( reply_to );
        self.textarea = $('.commentbox textarea');
    }

    function set_text( the_text )
    {
        self.textarea.val( the_text );
    }

    function reply_to() {
      set_text( 'a test text' );
    }
}();

Вы можете проверить это здесь . Правда, хотя я не действительно уверен, что вы пытаетесь достичь, хотя. Вы пытаетесь вернуть функцию reply_to, но сами связываете ее с обработчиком готовности init() ... так что вы можете либо связать ее немедленно (как описано выше), либо изменить ее и вернуть то, что вы хотите связать в другом месте.