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

Related: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 — Pete TNT, Sep 25 '14 at 09:43
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. — Fumu 7, Sep 25 '14 at 09:45
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`) — Jack, Sep 25 '14 at 09:48
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? — James, Sep 25 '14 at 09:51

score 1 · Accepted Answer · answered Sep 25 '14 at 10:00

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

Javascript variable undefined outside of class

1 Answers1