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 成员正确地指向所需的元素。 单击事件附加到“回复”按钮，因此只要用户单击它，就会调用reply_to() 函数。

所以，这就是我不明白的地方： * 什么时候使用“this”是安全的？从reply_to()使用它却不是，因为上下文似乎被设置为调用者元素。 * 为什么我可以从reply_to调用“set_text()”，但无法访问“textarea”成员？ * 我应该如何从reply_to()（这是一个事件回调）访问“textarea”成员？

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() 就绪处理程序中...因此您可以立即绑定它（如上所示），或者更改它并返回您想要在其他地方绑定的内容。