Question

所以我有一个像这样定义的对象（简化）：

mapRoute : {
            isInit : false,
            latLang : "",
            directionsService :  null,
            directionsRenderer : null,

            init : function() {
                if(!this.isInit) {
                    this.directionsService = new google.maps.DirectionsService();
                    this.directionsRenderer = new google.maps.DirectionsRenderer();
                    this.directionsRenderer.setPanel(document.getElementById("google_route_results"));
                    this.isInit = true;
                }
            },  


            planRoute : function() {
                var from;
                var to;

                from = $('#addressFrom').val();
                to = this.LatLang;

                var directionsRequest = {
                    origin:from,
                    destination:to,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

                this.directionsService.route(directionsRequest, this.planRouteCallback);
            },

            planRouteCallback : function(result,status){
                if(status == google.maps.DirectionsStatus.OK) {
                    this.directionsRenderer.setDirections(result);
                    this.directionsRenderer.setMap(google_map_object);
                } else {
                    this.handleErrors(status);
                }
            },

            //handleErrors
            handleErrors : function(statusCode) {
                //do stuff
            },


        }//end mapRoute

然而，当我的planRouteCallback执行时，我得到错误，因为'this'指的是DomWindow对象，而不是我的mapRoute对象。为什么会这样，我能做些什么吗？

Answer 1

问题是该函数不是在mapRoute对象的上下文中执行的。例如：

var foo = {bar: 10, fn: function(){ alert(this.bar); }};
foo.fn(); // called within the context of the object foo, so it alerts 10

var noContextFn = foo.fn;
noContextFn(); // uh oh, no context, alerts undefined

当您将回调mapRoute.planRouteCallback传递给其他函数时，它们现在具有对正确函数的引用，但不会在mapRoute的上下文中执行该回调，如上所述。

你可以创建一个匿名函数，并在每次将回调作为参数传递时使用self = this模式，尽管你可能最好一次性修复函数本身。您可以绑定该功能。构建mapRoute对象后，您可以运行：

mapRoute.planRouteCallback = mapRoute.planRouteCallback.bind(mapRoute);

（注意，bind()可能未在所有浏览器中实现，请参阅MDC了解您可以使用的实现。）

Answer 2

首先，javascript中的“this”有点棘手，取决于调用函数的位置，而不仅仅是函数的定义位置。

最快的跨浏览器解决方案是使用闭包。谷歌实际上有一篇关于谷歌地图封闭的文章。

http://code.google.com/intl/en/apis/maps/documentation/javascript/v2/events.html#Event_Closures

您可以访问GEvent.bind方法，您可以使用该方法正确引用您的回电。

 GEvent.bind(map, "click", myCounter, myCounter.increment);

但我不知道如何用方向路线来实现。此外，它可能会被v2弃用。这是一个更好的链接到地图v3

http://code.google.com/intl/en/apis/maps/documentation/javascript/events.html

所以，也许可以考虑这样的事情：

 var directionsRequest = {
                origin:from,
                destination:to,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

 var that = this;
 var planRouteCallback = function(result,status){
            if(status == google.maps.DirectionsStatus.OK) {
                that.directionsRenderer.setDirections(result);
                that.directionsRenderer.setMap(google_map_object);
            } else {
                that.handleErrors(status);
            }
        },

 this.directionsService.route(directionsRequest, planRouteCallback);

简单的闭包确实有助于回调。

Answer 3

我最终使用jQuery的代理来获得我想要的结果

this.directionsService.route(directionsRequest, $.proxy( this.planRouteCallback,this));

为什么在执行谷歌地图方向服务回调时'这个'是DomWindow对象

3 个答案: