javascript - 在我的 javascript 'class' 中调用内部函数的问题

Question

我正在尝试编写一些 JavaScript 来处理 Google map 的一系列功能，但以一种可在一个页面上的多个 map 重复使用的方式。

我遇到的问题是在函数内调用的函数似乎忽略了在我的 javascript“类”顶部声明的变量的 View (我知道它实际上不是一个类)。

geocodeAddress 函数调用 Google 的 geocoder.geocode API 函数，该函数接受一个以结果作为参数调用的函数。在这个结果函数中，我无法访问我的“类”中的其他属性，并且所有属性都设置为“未定义”。我也不能调用任何其他函数。

有人有什么想法吗？这甚至可能吗，或者我应该放弃这种风格，只是将 map 对象从一个方法传递到另一个方法，以使其可与其他 map 重用吗？

function GoogleMap(settings) {

var map;

this.zoom = settings.zoom;
this.center = new google.maps.LatLng(settings.lat, settings.lng);
this.mapContainerId = settings.mapContainerId;

this.initializeGoogleMap = function initializeGoogleMap(mapOptions) {
    this.map = new google.maps.Map(document.getElementById(this.mapContainerId), { zoom: this.zoom, center: this.center });
}

this.addMapMarker = function addMapMarker(markerOptions) {
    // add a marker here        
}

this.geocodeAddress = function geocodeAddress(location) {
    // I have full access to this.zoom, this.center etc. here
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location }, function (results, status) {

        // this.zoom, this.center etc. are inaccessible here and return undefined.
        if (status == google.maps.GeocoderStatus.OK) {
            this.map.setCenter(results[0].geometry.location);

            this.addMapMarker({ center: results[0].geometry.location, draggable: true, title: location });
        } else {
            alert('Could not find the address entered');
        }
    });
}

google.maps.event.addDomListener(window, 'load', this.initializeGoogleMap());

};

谢谢

Answer 1

回调本身不会为您保留 this 的值，因此您需要做一些事情来为您设置它。您可以创建闭包变量或将 .bind() 与回调一起使用。

这是一个使用闭包变量 self 的解决方案:

this.geocodeAddress = function geocodeAddress(location) {
    var self = this;
    // I have full access to this.zoom, this.center etc. here
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location }, function (results, status) {

        // this.zoom, this.center etc. are inaccessible here and return undefined.
        if (status == google.maps.GeocoderStatus.OK) {
            self.map.setCenter(results[0].geometry.location);

            self.addMapMarker({ center: results[0].geometry.location, draggable: true, title: location });
        } else {
            alert('Could not find the address entered');
        }
    });
}

并且，使用 .bind() 的解决方案:

this.geocodeAddress = function geocodeAddress(location) {
    // I have full access to this.zoom, this.center etc. here
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': location }, function (results, status) {

        // this.zoom, this.center etc. are inaccessible here and return undefined.
        if (status == google.maps.GeocoderStatus.OK) {
            this.map.setCenter(results[0].geometry.location);

            this.addMapMarker({ center: results[0].geometry.location, draggable: true, title: location });
        } else {
            alert('Could not find the address entered');
        }
    }.bind(this));
}