如何绑定Google Maps Geocoder.geocode()回调函数？

Question

我有一个视图，其中包含一个可以通过视图范围内的this.map访问的谷歌地图。 世界上一切都很好。

接下来，我想通过视图中的事件更新地图位置。 为此，我使用文本输入，使用google.maps.Geocoder.geocode()，然后通过以下方式更新位置：

setMapLocation: function (location) {

    _.bind(this.setMapLocationCallback, this);

    console.log(this);

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': location}, this.setMapLocationCallback);

},

console.log(this) 在这里显示了视图的范围，this.map 可以正常访问。请注意，我在这里显式地将回调函数绑定到 this。以下是回调函数：

setMapLocationCallback: function (results, status) {

    console.log('this in the callback');
    console.log(this);

    if (status == google.maps.GeocoderStatus.OK) {
        this.map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            map: this.map,
            position: results[0].geometry.location
        });
        this.mapCanvas.css({visibility: 'visibile'});
    } else {
        this.mapCanvas.css({visibility: 'hidden'});
    }
},

问题在于回调函数内部的console.log(this)显示，this被作用于Window对象，即使我明确地将它绑定到视图对象的this作用域中。

我需要访问此回调函数中的this.map，因为页面上可能有多个地图需要区分。

如何将此回调函数绑定到正确的作用域？或者，是否有更好的方法来解决这个问题？

我正在使用backbonejs和underscorejs，但这应该是一个相当通用的问题。

提前感谢， 大卫

- David Erwin

Answer 1

尝试更改。

 geocoder.geocode({'address': location}, this.setMapLocationCallback);

使用call()，可以在setMapLocationCallback中更改this的作用域。

 var _this = this;
 geocoder.geocode({'address': location}, function(result, status) {
     _this.setMapLocationCallback.call(_this, result, status);
 });

关于call()函数的MDN文档

- Fabrizio Calderan

---

做到了！谢谢先生！我一直听说这种事情将在即将推出的js版本中通过“直觉”语法来处理。期待看到它的表现如何。 - David Erwin

与此同时，在ECMAScript 5中，他们创造了bind（）方法，正是为了这种情况：您在函数上调用它，它创建一个新函数，在该函数内“this”的值等于您传递给bind（）的值。它避免了使用变量_this以及在实际回调setMapLocationCallback周围包装器函数。整个代码可以简化为geocoder.geocode({'address':location}, this.setMapLocationCallback.bind(this));。 - cachius

问题中的代码无法正常工作，因为geocode只记住它应该调用的函数，而不是它的作用域（this值）。即使您提供了this.setMapLocationCallback，它也只会记住setMapLocationCallback。因此，一些API接受额外的作用域参数。同时，bind()被发明出来以传递一个函数及其作用域。 - cachius