Question

我正在使用像

这样的JavaScript类

MyClass = function() { }
MyClass.prototype.init = function(param){ }
MyClass.prototype.reset = function() { }

如果我使用onClick="reset()"从HTML页面调用这些函数它很好用。但是如果我从jQuery调用这些函数它就不起作用了。请建议我。来自jQuery的示例调用：

$(document).ready(
    function()
    {
        app = new MyClass();
        app.init(someid, url,
            "event_handling": {
                "event1":app.reset
            });
    })

与上面一样，是否可以添加CSS规则，如：

"css_class_names": {
                        style-1: "firstStyle",
                        style-2: "secondStyle"
                    }

如果可能，那么如何将样式应用于具有ID的特定元素提前谢谢！

Answer 1

您的问题是，当应用调用event1时，它会从不同于您预期的上下文调用app.reset。换句话说，在你的app.reset中，“this”变量将不是你想要的。原因是，当您声明event1: app.reset时，它会将event1设置为函数app.reset。

解决方法：

"event1": function() { app.reset(); }

Answer 2

~~你还没有真正展示过来自jQuery的调用，但是我会猜测：~~实际上，你有，但问题不在于jQuery调用。请参阅下面的细分说明。

假设：

$("some selector").click(app.reset);

...您将app方法中的一个作为事件处理程序传递。

它不起作用的原因是在对方法的调用中，this不会引用app实例，它将引用DOM元素。在JavaScript（现在）中，this完全由函数的调用方式定义，而不是在函数的定义位置。

您可以使用jQuery $.proxy function在调用期间为函数指定正确的this值：

$("some selector").click($.proxy(app.reset, app));

或者，ECMAScript5为此定义Function#bind：

$("some selector").click(app.reset.bind(app));

...但是这需要你在一个实现它的引擎上运行，或者你有一个ES5垫片。

或如果碰巧有一个方便，你可以使用一个闭包：

$("some selector").click(function() {
    app.reset();
});

通过在它上面创建一个闭包（我们作为事件处理程序传递的函数），我们使用了app变量的事实。

更多（在我的博客上）：

在您的代码中：

$(document).ready(
    function()
    {
        app = new MyClass();
        app.init(someid, url,
            "event_handling": {
                "event1":app.reset
            });
    })

以上讨论适用于

"event1":app.reset

如果稍后您致电event1()，this将不会app。

您可以应用上述修复程序，如下所示：

jQuery.proxy：

"event1":$.proxy(app.reset, app)

Function#bind：

"event1":app.reset.bind(app)

关闭：

"event1":function() { app.reset(); }

从jQuery调用JavaScript类的函数

2 个答案: