Wie bekommt man die Objektreferenz innerhalb einer JQuery Callback-Funktion?

Question

Nehmen wir an, wir haben ein Javascript-Objekt namens aObject und die Funktion test() wird als Callback-Funktion in JQuery verwendet

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

Innerhalb dieser test()-Funktion ist der Kontext von "this" normalerweise das DOM-Element. Meine Frage ist, wie aObject zu verweisen, da wir "this" nicht verwenden können, um es zu verweisen.

EDIT: Ich bin mir nicht sicher, ob die obige Syntax der richtige/bevorzugte Weg ist, um ein Objekt zu instanziieren. Ich sehe einige Beispiele, die diese Syntax verwenden

var aObject = function() {....

Bitte teilen Sie mir mit, ob dies für das Problem relevant zu sein scheint.

Answer 1

Sie müssen nur Ihren Methodenaufruf einpacken, um die richtige this :

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

Wenn Sie nur placeHolder.test als Rückruf, übergeben Sie lediglich einen Verweis auf die test Funktion und diese Funktion wird mit dem DOM-Element als this .

Sie könnten auch versuchen bind :

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

Answer 2

Wenn Sie einen Jquery-Funktionsaufruf mit $.proxy(function, this) umhüllen, dann wird Jquery Ihren Verweis auf diese Funktion korrigieren, damit sie so funktioniert, wie Sie es wünschen.

Erstens: Ihre Frage ist richtig gestellt. Allerdings funktioniert Ihr Code nicht, und wenn er behoben ist, zeigt er eine Lösung für das Problem auf. Eine kurze Lektion: Sie werden mehr lernen, wenn Sie Ihren Problemcode zuerst debuggen!

---

Im Folgenden werde ich das Problem, die von Ihnen dargestellte Lösung und eine elegantere Lösung darlegen.

---

Hier ist das betreffende Objekt:

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

---

Hier ist ein Beispiel für das Problem:

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

---

Hier ist die von Ihnen kodierte Lösung:

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();

---

Zum Schluss noch eine etwas elegantere Antwort:

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

    );
}
    anInstanceOfAObject.someFunction();

Answer 3

Dies bezieht sich immer auf das Dom-Element. Um das jQuery-Objekt zu erhalten, das mit dem Element verbunden ist, müssen Sie es wieder in das JQuery einpacken, also entweder $(this) oder jQuery(this), je nach Ihrer Einrichtung.