Comment obtenir la référence d'un objet dans une fonction de rappel JQuery ?

Question

Disons que nous avons un objet javascript appelé aObject et que la fonction test() est utilisée comme fonction de rappel dans 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,
    });
}

Dans cette fonction test(), le contexte de "this" est normalement l'élément DOM. Ma question est de savoir comment référencer un objet puisque nous ne pouvons pas utiliser "this" pour le référencer.

EDIT : Je ne suis pas sûr que la syntaxe ci-dessus soit la manière correcte/préférée d'instancier un objet. Je vois quelques exemples utilisant cette syntaxe

var aObject = function() {....

Veuillez m'informer si cela semble avoir un rapport avec le problème.

Answer 1

Il suffit d'envelopper votre appel de méthode pour obtenir le droit this :

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

Lorsque vous utilisez seulement placeHolder.test en tant que callback, vous transmettez simplement une référence à l'objet test et cette fonction sera appelée avec l'élément DOM en tant que this .

Vous pouvez également essayer bind :

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

Answer 2

Si vous encapsulez un appel de fonction jquery avec $.proxy(function, this), jquery corrigera votre référence à this pour qu'elle fonctionne comme vous le souhaitez.

Tout d'abord, votre question est pertinente. Cependant votre code ne fonctionne pas et quand il est corrigé il illustre une solution au problème. Une petite leçon : vous apprendrez davantage si vous déboguez d'abord votre code problématique !

---

Je vais fournir ci-dessous le problème, la solution que vous illustrez et une solution plus élégante.

---

Voici l'objet en question :

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

---

Voici un exemple du problème :

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

---

Voici la solution que vous avez codée :

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

---

Voici enfin une réponse un peu plus élégante :

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

Ceci fait toujours référence à l'élément dom. Pour obtenir l'objet jQuery lié à l'élément, vous devez l'envelopper dans le jquery à nouveau, donc soit $(this) ou jQuery(this) selon votre configuration.