Questions related to JavaScript object literal and google map API

Question

This code is not working as expected. I am trying to use the Google Geolocation API to figure out my current location. However, when I try to log the result for the google.maps.LatLng object, I got (0,0) as the latitude and longitude coordinates.

        $(document).ready(function(){
            var func = {
                lat:0,
                long:0,
                success:function(pos) {
                  var crd = pos.coords;
                  this.lat = crd.latitude;
                  this.long = crd.longitude;
                },

                error:function(err) {
                  console.log('ERROR(' + err.code + '): ' + err.message);
                },

                init:function(){
                    navigator.geolocation.getCurrentPosition(this.success, this.error);
                }

            };

            func.init();

            $('button').on('click',function(){
                var loc = new google.maps.LatLng(func.lat, func.long);

                alert(loc);
            });
        });

However, the code underneath works. All I did was changing "this" keyword to the object's name. It shouldn't make a difference.

       $(document).ready(function(){
            var func = {
                lat:0,
                long:0,
                success:function(pos) {
                  var crd = pos.coords;
                  func.lat = crd.latitude;
                  func.long = crd.longitude;
                },

                error:function(err) {
                  console.log('ERROR(' + err.code + '): ' + err.message);
                },

                init:function(){
                    navigator.geolocation.getCurrentPosition(func.success, func.error);
                }

            };

            func.init();

            $('button').on('click',function(){
                var loc = new google.maps.LatLng(func.lat, func.long);

                alert(loc);
            });
        });

I am not sure why the code snippet on the top produces incorrect output? I am not too familiar with Objected Oriented JavaScript. I would appreciate it if anyone could help me understand what is going on.

You've stated "Questions" in the title but your post does not include a question statement or a clearly defined problem statement. — user4639281
– user4639281, Commented Jul 7, 2015 at 23:33
My question is why the code snippet on the top produces incorrect output? I was thinking maybe I used JavaScript Object literal incorrectly. — Guan Summy Huang
– Guan Summy Huang, Commented Jul 7, 2015 at 23:39
Yes, but readers should be able to understand what the question is by reading a question statement in your post. Please edit your question to clarify the intent of your question. Let us know what the expected result should be and what the result currently is. Believe it or not, phrasing is a big part of what makes a question good or bad. — user4639281
– user4639281, Commented Jul 7, 2015 at 23:41

Michael Geary · Accepted Answer · 2015-07-07 23:59:19Z

In your first example, when you call:

getCurrentPosition(this.success, this.error);

You are merely passing the success and error functions into getCurrentPosition. Even though you reference them here via this, that is not carried through to the point where the functions are actually called. It only passes the function references themselves, not the this value that you were using here.

Another way to understand the problem: the value of this inside a function is determined at the time the function is called. When you write foo.bar() you are calling the bar() function with foo as the this value inside the function. But when you write foo.bar without the (), you are only getting a reference to bar itself. foo is out of the picture after that. If you pass foo.bar into another function which expects a callback, when it finally calls bar() there is no longer any association with foo.

That's why your second example works. It does not depend on this but uses func which is valid throughout the outer function.

Collectives™ on Stack Overflow

Questions related to JavaScript object literal and google map API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related