Références et la portée dans les fonctions anonymes

Question

Je suis nouveau à javascript orienté objet. J'ai une classe simple, ce qui semble être en JavaScript une fonction. Ma classe a deux membres et certaines méthodes:

function WebApp() { 
    //members 
    this.webSocket = null; 
    this.workdata = null; 

    //constructor 
    $('document').ready(function() { 
    $('#wait').show(); 
    this.initializeWebsocket(); 
    }); 

    this.getURLParameter = function(sParam) 
    { 
    //retrieves GET-PARAMETER 
    } 

    this.initializeWebsocket = function() { 
     //websocket connection 
     } 
} 
var app = new WebApp(); 

Lorsque la fonction anonyme pour des courses document.ready je reçois l'erreur suivante: Uncaught ReferenceError: initializeWebsocket n'est pas défini

Je comprends l'exception parce que c'est dans ce document de portée. Je suis en mesure d'appeler la fonction de la façon suivante:

app.initializeWebsocket(); 

Mais cette façon, je ne peux pas instancier plus d'un objet de WebApp. Est-il possible de passer l'instance this-webapp comme référence dans la fonction anonyme?

Answer 1

Pour commencer, vous devez placer l'appel initial dans $ ('document'). Ready() et non dans votre classe. Deuxièmement; 'this' à l'intérieur de la fonction ready pointe maintenant vers le callback de l'appel ready et cela n'a en effet pas la méthode initializeWebsocket dessus. Vous pouvez aller avec un var that = this solutionn mais dans ce cas, vous êtes sauvé en tirant le document prêt.

$(function() { 
    var app = new WebApp(); 
}); 

function WebApp() { 
    //members 
    this.webSocket = null; 
    this.workdata = null; 

    $('#wait').show(); 
    this.initializeWebsocket(); 

    this.getURLParameter = function(sParam) 
    { 
     //retrieves GET-PARAMETER 
    } 

    this.initializeWebsocket = function() { 
     //websocket connection 
    } 
} 

Notez que j'ai également tiré l'initialisation vers le haut pour la lisibilité. Cela fonctionne en raison de hoisting. J'ai également utilisé la version abrégée de la syntaxe prête pour le document.

Answer 2

Vous shpuld enregistrer la référence à this en dehors de votre fonction anonymous comme ceci:

function WebApp() { 
 
    var self = this; // Reference to this is in variable called self. 
 
    //members 
 
    this.webSocket = null; 
 
    this.workdata = null; 
 

 
    //constructor 
 
    $('document').ready(function() { 
 
    $('#wait').show(); 
 
    self.initializeWebsocket(); // Here this refers to different scope.. so use self 
 
    }); 
 

 
    this.getURLParameter = function(sParam) 
 
    { 
 
    //retrieves GET-PARAMETER 
 
    } 
 

 
    this.initializeWebsocket = function() { 
 
     //websocket connection 
 
    console.log("inside websocket") 
 
     } 
 
} 
 
var app = new WebApp();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

Le cœur du problème est les lignes de votre code ci-dessous:

$('document').ready(function() { 
    $('#wait').show(); 
    this.initializeWebsocket(); 
    }); 

this fait référence à la fonction anonyme dans ready(). Cela ne fait pas référence à l'objet que vous avez créé. Il y a un moyen facile de le réparer - modifier la portée de la fonction anonyme.

Même si vous ne devriez pas vraiment utiliser $(document).ready dans votre constructeur, la meilleure façon de remédier à votre problème serait d'utiliser $.proxy. Le code que vous avez besoin de modifier et d'ajouter serait:

$(document).ready($.proxy(function() { 
    $('#wait').show(); 
    this.initializeWebsocket(); 
    }, this)); 

Answer 4

Voici l'astuce

function WebApp() { 
    //members 
    this.webSocket = null; 
    this.workdata = null; 

    $('#wait').show(); 
    this.initializeWebsocket(); 

    this.getURLParameter = function(sParam) 
    { 
     //retrieves GET-PARAMETER 
    } 

    this.initializeWebsocket = function() { 
     //websocket connection 
    } 
} 

$(function() { 
    var app = new WebApp(); 
}); 

Answer 5

Dans ces lignes de code:

function WebApp() { 
    //members 
    this.webSocket = null; 
    this.workdata = null; 

    //constructor 
    $('document').ready(function() { 
    $('#wait').show(); 
    this.initializeWebsocket(); 
    }); 

Le mot-clé this fait référence à l'objet englobante, qui est $('document') dans ce cas. Pour référencer l'objet externe (WebApp), il suffit d'utiliser une variable d'objet:

function WebApp() { 
    //members 
    this.webSocket = null; 
    this.workdata = null; 

    // reference to me 
    var that = this; 

    //constructor 
    $('document').ready(function() { 
    $('#wait').show(); 
    that.initializeWebsocket(); 
    }); 

La portée des variables comme that et leur valeur actuelle seront fixés dans le cadre de l'appel à $('document').ready lors de l'exécution de JS.