How to access an object property from a callback function inside its method?

Question

I am defining this class:

function GMap(map, marker, geocoder) {
    this.map = map;
    this.marker = marker;
    this.geocoder = geocoder;

    this.setMarker = function(address) {
        this.geocoder.geocode({'address' : address}, function(results, status) {
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);
        });
    }
}

How can you access the map and marker properties of GMap from the callback function?

Thanks a lot.

Kevin Vaughan · Accepted Answer · 2010-08-14 17:43:51Z

The Function object prototype has an "apply" method that you can use to set the context of "this" within a function. Check the API/code for whatever geocoder.code is, many libraries will handle this for you through an extra parameter, i.e.:

this.someObj.someFn(params, callback, scope);

Within someFn, it would use the callback similarly to this:

callback.apply(scope || window, [callbackArg1, callbackArg2]);

This would make the "this" context within "callback" whatever had been passed in as "scope", or if nothing was passed in, "this" would be the global context of the window. Some javascript libraries also provide a way to create a callback function delegate that ensures the function is always called with the expected scope no matter where it ends up being called from. An example of this is ExtJS's Function.createDelegate

If the library you are using doesn't provide this as built in functionality, then you can create a local var to reference within your callback closure, i.e.:

this.setMarker = function(address) {
    var thisGMap = this;
    this.geocoder.geocode({'address' : address}, function(results, status) {
        thisGMap.map.setCenter(results[0].geometry.location);
        thisGMap.marker.setPosition(results[0].geometry.location);
    });
}

BGerrissen · Accepted Answer · 2010-08-14 18:05:01Z

Is this what you're looking for?

function GMap(map, marker, geocoder) {
    this.map = map;
    this.marker = marker;
    this.geocoder = geocoder;

    var currentGMap = this; // private variable bound to GMap constructor scope

    this.setMarker = function(address) {
        this.geocoder.geocode({'address' : address}, function(results, status) {
            // currentGMap is available (yay closures)
            currentGMap.map.setCenter(results[0].geometry.location);
            currentGMap.marker.setPosition(results[0].geometry.location);
        });
    }
}

Note: map and marker are also bound through a closure, though I assume you want to be able to change the map and marker properties after you created your GMap instance.

Edit: yeh, I see Kevin also awnsered this before me in the last part of his awnser.

Thomas Clayson · Accepted Answer · 2010-08-14 17:17:37Z

0

I'm guessing its a google map? Why are you passing through the map and the marker at all? Make them global variables (ie: put var map; OUTSIDE of all functions) then you should be able to access them from anywhere.

Its also a bad idea to reuse variable names within functions. If you've passed them into the function in the first place then they will become function variables, so defining map, marker and geocoder in your function is pointless as you will already be able to access them by using map, marker and geocoder. :)

answered Aug 14, 2010 at 17:17

Thomas Clayson

30k26 gold badges153 silver badges226 bronze badges

1 Comment

Toto Over a year ago

I am passing the map and marker to do Dependency Injection => Global variables are forbidden in "testable code". :) youtube.com/watch?v=acjvKJiOvXw

Daniel Loureiro · Accepted Answer · 2014-04-25 19:53:05Z

0

if you are using jQuery, there's a method called $.proxy() that you can use for change the context (set the "this" of a function to whatever you want).

this.setMarker = function(address) {
    this.geocoder.geocode({'address' : address}, $.proxy(function(results, status) {
        this.map.setCenter(results[0].geometry.location);
        this.marker.setPosition(results[0].geometry.location);
    }, this));
}

answered Apr 25, 2014 at 19:53

Daniel Loureiro

5,49141 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to access an object property from a callback function inside its method?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related