如何在JQuery回调函数内获取对象引用？

Question

假设我们有一个名为aObject的Javascript对象，并且test()函数被用作JQuery的回调函数。

var aObject = {
    aVariable : 'whatever value',
    test : function() {
        // Trying to access property. But doesn't work as expected since I am getting the DOM element, not the aObject reference
        var temp = this.aVariable;
    }
}

var anInstanceOfAObject = $.extend({}, aObject);

anInstanceOfAObject.someFunction = function () {
    // I have to put "this" in a variable since "this" in the context below refers to the DOM element, not the instance of the object
    var placeHolder = this;
    $('some random div.element').theJavascriptFunction({
        "theJavascriptCallbackFunction": placeHolder.test,
    });
}

在test()函数内部，通常情况下“this”的上下文是DOM元素。我的问题是如何引用aObject，因为我们不能使用“this”来引用它。

编辑：我不确定上面的语法是否是实例化对象的正确/首选方式。我看到一些示例使用这种语法。

var aObject = function() {....

如果这似乎与问题有关，请通知我。

- developarvin

---

你的意思是 aObject 吗？ - Baz1nga

是的，我想要获取一个对象，而不是 DOM 元素（如果能够同时获取两个最好）。 - developarvin

Answer 1

你只需要将方法调用包装起来，以获取正确的this：

anInstanceOfAObject.someFunction = function () {
    var placeHolder = this;
    $('some random div.element').theJavascriptFunction({
        "theJavascriptCallbackFunction": function() { placeHolder.test() }
    });
}

当您仅使用placeHolder.test作为回调时，您只是将对test函数的引用交给了它，并且该函数将以DOM元素作为this进行调用。

您还可以尝试bind：

anInstanceOfAObject.someFunction = function () {
    var placeHolder = this;
    $('some random div.element').theJavascriptFunction({
        "theJavascriptCallbackFunction": this.test.bind(this)
    });
}

- mu is too short

Answer 2

如果你用$.proxy(function, this)包装一个jquery函数调用，那么jquery会修复对this的引用，使它按照你想要的方式工作。

首先，你的问题是正确的。但是你的代码不起作用，当修复后，它展示了解决问题的方法。一个简短的教训：如果你先调试你的有问题的代码，你会学到更多！

---

下面我将提供问题，您将说明解决方案以及更加优雅的解决方案。

---

这是需要讨论的对象：

var aObject = {
    aVariable : 'whatever value',
    test : function() {
        // Trying to access property. 
                    //But doesn't work as expected since I am getting 
                    //the DOM element, not the aObject reference
        var temp = this.aVariable;
        alert("temp=" + temp);
    }
}

---

这是一个问题的例子：

var anInstanceOfAObject = $.extend({}, aObject);
anInstanceOfAObject.someFunction = function() {
    $(function() {
        //The problem. 'this' is not set after calling the fn via jquery.
        this.test();
    });
anInstanceOfAObject.someFunction();

---

这是您编写的解决方案：

var anInstanceOfAObject = $.extend({}, aObject);
anInstanceOfAObject.someFunction = function() {
            // by saving this in placeHolder you solve the problem. Good!
    var placeHolder = this;
    $(function() {
                    // Your solution works. Here you pass forward your ref to this
        placeHolder.test();
    });
}
anInstanceOfAObject.someFunction();

---

最终，这里有一个稍微更优雅的答案：

var anInstanceOfAObject = $.extend({}, aObject);
anInstanceOfAObject.someFunction = function() {
    $(
        $.proxy(function(){
            // using $.proxy gets jquery to fix your this ref
            this.test();
        },this)

    );
}
    anInstanceOfAObject.someFunction();

- Jalkin

Answer 3

this总是指dom元素。要获取与该元素相关的jQuery对象，您需要再次将其包装在jquery中，因此取决于您的设置，可以使用$(this)或jQuery(this)。

- longstaff