Javascript：如何从事件回调函数访问对象成员

我试图弄清楚我的对象设计有什么问题，我遇到了一些问题。

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（）函数。

所以，这是我不明白的：*使用“这个”是安全的吗？ 使用来自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()就绪处理程序中自己绑定它…因此您可以立即绑定它（如上所述），或者更改它并返回您想要绑定到别处的内容。