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实例。关键是我希望能够访问实际的Comment实例。

免责声明：我根本不是前端人员，所以我可能需要一些严格的解释来解决这个问题，谢谢！

Answer 1

您可以使用.bind

为函数定义this-object

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

在你的情况下

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

将jQuery与ES6中的类一起使用

1 个答案: