Javascript variable undefined outside of class

Question

I am relatively new to Javascript OOP and have been attempting to build a class to handle some functionality within my application. The issue I am having is that after I have initialized my class, which sets some values in the constructor, when I call a function of that class which should update some variables within that instance and return them, these variables are coming through as undefined outside of the instance. Here is my code:

//Google Maps Javascript class
 var googleMapsFunctions = function(clubs, location) {
 this.clubs = clubs;
 this.location = location;
 this.latLng = new Array();
 this.geocoder = new google.maps.Geocoder();
 this.closeClubs = [];
 }
 googleMapsFunctions.prototype.setLatLng = function() {
 this.geocoder.geocode({'address' : this.location}, function(results, status) {
 if(status === "OK") { 
 this.latLng.push(results[0].geometry.location.k);
 this.latLng.push(results[0].geometry.location.B);
 } 
 });
 } 
 googleMapsFunctions.prototype.calculateDistances = function() {
 var sortable = [];
 var resultsArray = new Array();
 try {
 //alert(this.latLng);
 } catch(error) {
 alert(error);
 }
 }
 //Client code
 var JSONItems = <?php echo $this->JSONItems; ?>; 
 var searchTerm = "<?php echo $this->searchTerm; ?>";
 var googleMapsClass = new googleMapsFunctions(JSONItems, searchTerm);
 googleMapsClass.setLatLng(); 
 googleMapsClass.calculateDistances();

When I try and access the 'this.latLng' variable from outside of the instance, it is saying that it is undefined. It is defined and outputting correctly when I log the data from within the 'setLatLng' function though which makes me think this is an encapsulation issue? Can anybody give me some advice as to why this may be occuring? Thanks

• Pete TNT: Related: stackoverflow.com/questions/111102/…
• Fumu 7: Yes, that is encapsulation. If you need to access the variable inside of a instance, you should add method for accessing the variable in that class. If you want to get data of latLng, add method getLatLng() which returns value of latLng in the class.
• Jack: What's your JS look like when you try and access the latLng property of your instance? It may be caused by the context of this (usually caused by invoking the function with this set to the context of, say window)
• James: When I console.log 'this' from within my setLatLng function it thinks 'this' is the window object. I thought as it was within a prototype function it would be part of the instance? Maybe it's the Google maps geocode function changing the scope?

Answer 1

Keep the reference to the prototypes "this" by setting this to an variable and using it inside the Geocoders callback

var googleMapsFunctions = function(clubs, location) {
 this.clubs = clubs;
 this.location = location;
 this.latLng = new Array();
 this.geocoder = new google.maps.Geocoder();
 this.closeClubs = [];
}
googleMapsFunctions.prototype.setLatLng = function() {
 var that = this;
 this.geocoder.geocode({'address' : this.location}, function(results, status) {
 if(status === "OK") { 
 that.latLng.push(results[0].geometry.location.k);
 that.latLng.push(results[0].geometry.location.B);
 } 
 });
}