如何编写OOP JS并同时使用jQuery

Usually (if not always), when jQuery allows you to add a callback to some JS event like click, in the callback function they change the "meaning" of this into the DOM element which triggered the event.

通常(如果不总是),当jQuery允许您向某些JS事件添加回调(如click)时,在回调函数中,它们将其“含义”更改为触发事件的DOM元素。

This can be quite useful, but it will stand in your way when you write OOP code in js, like in this example:

这可能非常有用,但是当你在js中编写OOP代码时,它会阻碍你,就像在这个例子中一样:

function MyClass() {}

MyClass.prototype = {

    init: function() {
        $("#someSpan").click(this.doSomething);
    },

    doSomething: function() {
        alert("Here 1");
        this.test();
        return false;
    },

    test: function() {
        alert("Here 2");
    }
}

In this example, this.test() will not work, because this is not anymore an instance on MyClass but instead a jQuery DOM element (the span).

在这个例子中,this.test()将不起作用,因为它不再是MyClass上的实例,而是jQuery DOM元素(span)。

My questions are: is there a way to continue writing OOP code in JS using this pattern and also use jQuery? And: why is jQuery changing this in the callback function when it could as easily send the jQuery DOM element as first argument ?

我的问题是:有没有办法继续使用这种模式在JS中编写OOP代码并使用jQuery?并且:为什么jQuery会在回调函数中更改它,因为它可以轻松地将jQuery DOM元素作为第一个参数发送?

1 个解决方案

#1

jQuery has $.proxy that can be used like so:

jQuery有$ .proxy可以像这样使用:

function MyClass() {
    this.clicked = $.proxy(this.clicked, this);
}

MyClass.prototype = {

    clicked: function(e) {
        alert("Here 1");
        this.test();
        e.currentTarget; //this replaces "this"-the keyword used in "non OOP" contexts
//see http://api.jquery.com/event.currentTarget/
    },

    init: function() {
        $("#someSpan").click(this.clicked);
    },

    test: function() {
        alert("Here 2");
    }
}

When you create an instance, that instance gets its own .clicked function that shadows the generic one in the prototype. It will always have same this binding no matter how you call it. So you can pass this.clicked all over the place and have it work.

创建实例时,该实例会获得自己的.clicked函数,该函数会隐藏原型中的通用函数。无论你怎么称呼它,它总是会有这个绑定。所以你可以通过this.clicked遍布这个地方让它工作。