OO JS & Google Maps API: что я делаю не так?

Question

Это мой первый набег на OO JS, с проблемами.

В идеале в этом сценарии у меня был бы объект mapLocation, который я мог бы просто передать в координатах, значок, HTML-код для отображения при щелчке и все. Я добавил бы это к моей карте Google на странице, и у меня было бы кое-что многократное использование. Очевидно, это будет переработано позже.

Кроме того, я не особо доволен тем, как выглядит мой код в данный момент. :)

Вот объект, с которым я приду.

function mapLocation() {

    this.lat = 0;
    this.lng = 0;
    this.icon = '';
    this.html = '';
    this.getLocation = getLocation;
}

function getLocation() {
    var baseIcon = new GIcon(G_DEFAULT_ICON);
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    var letteredIcon = new GIcon(baseIcon);
    letteredIcon.image = this.icon;
    var point = new GLatLng(this.lat, this.lng);
    var marker = new GMarker(point, { icon:letteredIcon });

    function show() {
        marker.openInfoWindowHtml('Lat: '+this.lat+'<br />Lng: '+this.lng+'<br /><img src="'+this.icon+'" />');
    }
    alert(this.lat);
    GEvent.addListener(marker, "click", show);
    return marker;
}

А вот и моя реализация.

var a = new mapLocation;
a.lat = 52.136369;
a.lng = -106.696299;
a.icon = 'http://www.google.com/mapfiles/markerA.png';
a.html = 'asdf fdsa';

var b = a.getLocation();
map.addOverlay(b);

Итак, у меня появляется окно, мой маркер, но появляется функция show () с неопределенным в нем.

Мне любопытно, что я делаю неправильно - как я не так думаю - в этой проблеме.

Спасибо за взгляд.

Answer 1

Не могу быть уверенным без этих дополнительных функций, но я полагаю, что это справочная проблема "this", потому что ваша функция show не создает замыкание.

Попробуй это (Правка: я идиот, забыл проблемы с этим):

function show() {
  var x = this;
  return function(){marker.openInfoWindowHtml('Lat: '+x.lat+'<br />Lng: '+x.lng+'<br /><img src="'+x.icon+'" />');}
}

GEvent.addListener(marker, "click", show());

Что касается OOJS ... комментарии, чтобы объяснить:

//convention is to name JS classes with an uppercase character
function MapLocation(params) 
{
    //instantiate from a params object to keep a flexible contructor signature
    //(similarly you can use the native arguments object but I prefer to be explicit)
    this.lat = (params.lat ? params.lat : 0);
    this.lng = (params.lng ? params.lng : 0);
    this.icon = (params.icon ? params.icon : '');
    this.html = (params.html ? params.html : '');

    //keep methods contained within the class definition
    if (typeof(this.geolocation) == 'undefined') //execute once
    {
        //by binding methods with prototype you only construct a single instance of the function
        MapLocation.prototype.getLocation = function ()
                                            {
                                                /* ... */
                                            }
    }
}

//property set at constructor
var a = new MapLocation({lat:52.136369, lng:-106.696299, icon: 'http://www.google.com/mapfiles/markerA.png'});

//deferred property setting
a.html = 'asdf fdsa';

Answer 2

    var _this = this;
    function show() {
            marker.openInfoWindowHtml('Lat: '+_this.lat+'<br />Lng: '+_this.lng+'<br /><img src="'+_this.icon+'" />');
    }

Помните, что если функция не вызывается как член объекта, это окно ===.

Кроме того, более чистый способ выразить все это:

function mapLocation() {
   // constructor stuff
}

mapLocation.prototype = {
  getLocation: function() {
    // code for getLocation 
  }
};

Тогда вам не нужно присваивать this.getLocation в конструкторе.