Question

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

这可能非常有用，但是当您在js like in this example中编写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");
    }
}

在此示例中，this.test()将不起作用，因为this不再是MyClass上的实例，而是jQuery DOM元素（跨度）。

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

Answer 1

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");
    }
}

创建实例时，该实例会获得自己的.clicked函数，该函数会隐藏原型中的通用函数。它会无论你怎么称呼它，总是有相同的this绑定。因此，您可以将this.clicked传递到所有地方并使其正常工作。

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

1 个答案: