Calling an object function gets undefined when run inside a click event

Question

From my object PolygonExtend I can trigger some inner actions like show and hide. Those actions seem to work fine. However, when I run the same actions inside a click event (google.maps.event.addDomListener) I get a "TypeError: this.name is undefined". How can I get it to work?

jsFiddle here

var mapOptions = {
        center: new google.maps.LatLng(4.7102000, -74.0308118),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var coords = [
  {lat: 4.711177836295898, lng: -74.03219819068909},
  {lat: 4.710354506576612, lng: -74.03219819068909},
  {lat: 4.710354506576612, lng: -74.03176367282867},
  {lat: 4.711177836295898, lng: -74.03176367282867}
];

function PolygonExtend(name, path) {
        //this.name = name;
        this.path = path;
        this.name =  new google.maps.Polygon({
                path: this.path,
        });

        this.show = function() {
            this.name.setMap(map);
        };
        this.hide = function() {
            this.name.setMap(null);
        };

        return this.name.setMap(map); // makes Polygon show when instantiated
}

a = new PolygonExtend('a', coords); // works and renders Polygon

a.hide(); // works, hides Polygon
a.show(); // works, makes Polygon visible again

var btn = document.getElementById('btn');
google.maps.event.addDomListener(btn, 'click', a.hide); // TypeError: this.name is undefined

the 'this' keyword is bound to the window object when you pass a.hide into googe.maps.event.addDomListener. you need to save an instance of 'this' to a variable and reference it from this.hide. — codemax, Apr 22 '17 at 02:40

score 3 · Answer 1 · edited Apr 22 '17 at 03:22

3

As mentioned in the comments above, do this (if you have not tried this solution already)

function PolygonExtend(name, path) {
    //this.name = name;

    var self = this;
    this.name =  new google.maps.Polygon({
            path: path,
    });


    this.show = function() {
        self.name.setMap(map);
    };

    this.hide = function() {
        self.name.setMap(null);
    };

    return this.name.setMap(map); // makes Polygon show when instantiated
}

edited Apr 22 '17 at 03:22

Kyle Richardson

4,943
2
14
36

answered Apr 22 '17 at 02:42

codemax

1,205
11
16

Nope. `this` in an Object refers to the Object. Your use of `self` is pointless in those cases actually, since `this` inside a method refers to the instance. – StackSlave Apr 22 '17 at 03:22
Now it could work, if OP's other code wasn't messed up. But, if `this.path` was going to change dynamically, you might want `this.path = path` and `paths:self.path` in the `Polygon`. – StackSlave Apr 22 '17 at 03:28
You're right. At first glance, I wrongly deduced that this referred to the window instance. But this is actually the button object in this case – codemax Apr 22 '17 at 03:28
Good note on that – codemax Apr 22 '17 at 03:30

StackSlave · Accepted Answer · 2017-04-22T03:42:20.923

I'm not sure what you're trying to do. Seems like a waste of code, but look at this:

function PointlessPolygon(map, coords){
  var t = this;
  this.map = map; this.coords = coords; this.showing = true;
  this.polygon = new google.maps.Polygon({paths:t.coords});
  this.show = function(){
    this.polygon.setMap(map); this.showing = true;
  };
  this.hide = function(){
    this.polygon.setMap(); this.showing = false;
  }
  this.polygon.setMap(map); // makes Polygon show when instantiated
}
var pp = new PointlessPolygon(map, coords);
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  pp.showing ? pp.hide() : pp.show();
});

https://jsfiddle.net/evb4kmhw/2/

Calling an object function gets undefined when run inside a click event

2 Answers2