Question

I am currently working on google map api V3 using cakephp with prototype.js. I have a javascript class called: TravelMapprManager and it has 4 class variables with 18 functions.

var TravelMapprManager = Class.create( {

  // id of container
    map_container : '',

  /* the current map */
    map : null,

  /* geocoding location */
    geocoder : null,

   /* user entered locations */
     user_journey : new Array(),

  //many other functions [.....]

initialize : function( map_container ) {

    this.map_container = map_container;

    // start the map
    Event.observe( window, 'load', this.displayMap.bind(this) );

    // observe the map buttons
    Event.observe( document, 'dom:loaded', this.initObservers.bind(this) );

},

   /*
    * Save the location entered
    */
findLocation : function() {

    location_name = $( 'LocationName' ).value;


    if ( location_name == '' ) {
        alert( "Please enter a location name." );
        return;            
    }

    // we only allow a maximum number of locations
    if ( this.user_journey.length >= 20 ) {
        alert( "Sorry! We have reached the maximum number of locations." );
        return;
    }

    // Do geocoding, find the longitude and latitude of the location
    if ( this.geocoder ) {

        var current_o = this;

        this.geocoder.getLatLng(
            location_name,
            function( point ) {

                if ( !point ) {
                    alert( location_name + " not found" );
                } else {

                    // store the location
                    current_o.storeLocation( location_name, point );

                    // center the location on the map and add push pin marker
                    current_o.map.setCenter( point, 13 );
                    var marker = new GMarker( point );
                    current_o.map.addOverlay( marker );
                }
            }
            );
        }
    }
})

What does var current_o = this; mean in the function findLocation?

Answer 1

this inside function findLocation is different than the this keyword in the inner function:

var current_o = this; //<-- Store reference to the `this` keyword inside the func
...
this.geocoder.getLatLng(
        location_name,
        function( point ) { //<------------ 
....

By storing the this keyword in a temporary variable, the inner function can also access properties of the this inside function findLocation.

---

A simple example. This code adds an event listener to the next input element, while maintaining a reference to the previous element:

var a = document.getElementsByTagName("input");
a[0].onclick = function(){
    var firstElement = this; //First `this`
    a[1].onclick= function(){
        firstElement.onclick = function(){}; //Reset
        this.onclick = function(){alert("This is different!")}; //Second `this`
    }
}

The this keyword inside event listeners refer to the element they’re bound to. In the example, the first this refers to element input[0], while the second this refers to input[1]. When you don’t store the first this in a temporary variable (firstElement), you wouldn’t be able to refer to the previous this (without directly referring to the first element by document.getElements..).