將jQuery與ES6的類一起使用

Question

我剛剛面對我的新項目的一個小問題。基本上，有一個帖子頁面和一些來自後端的評論作爲頁面的一部分。我想要做的就是爲這些提供一些JavaScript邏輯。我提供的是：

class Comment { 
    constructor(comment) { 
     console.log("Creating comment object..."); 
     $(comment).find(".vote").click(this.toggle_vote); 
     $(comment).find(".action.reply").click(this.toggle_reply); 
    } 

    toggle_vote() { 
     // Context here is `span.reply`, not Comment instance, 
     // but I want to access class members 
     if ($(this).is(".voted")) { 
      $(this).removeClass("voted"); 
      return; 
     } 

     $(this).addClass("voted"); 
     $(this).siblings().first().removeClass("voted"); 
    } 

    // ... 
} 

下面的問題在於jQuery的回調風格。當我將類成員傳遞給jQuery回調時，在調用時，jQuery嘲笑它的上下文，所以this是span.reply，而不是Comment實例。關鍵是我想能夠達到實際的評論實例。

聲明：我根本不是前端人，所以我可能需要一些嚴格的解釋來解決這個問題，謝謝！

Answer 1

可以使用.bind

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

在你的情況

.click(this.toggle_vote.bind(this))