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

所以，這是我不明白： *當使用「這個」是安全的？使用它從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'); 
    } 
}(); 

You can test it here。誠然，雖然我不是真的確定你想要完成什麼。您正在嘗試返回reply_to函數，但您自己將其綁定在init()就緒處理程序中，以便您可以立即將其綁定（如上所述），或者將其更改並返回您想要綁定到別處的內容。