Question

我有以下功能。除了Push，Pop和Remove方法之外，一切正常。这些方法应该由event-handler调用。此事件由google maps api触发。

问题是当事件被触发时，找不到这些方法。我有一个“推送未定义”错误消息。

我尝试使用这个，但这不起作用。

如何从事件处理程序中调用公共方法？

谢谢你们

function Track(mapContainer) {
var map = mapContainer;
var points = new Array();

var isEditMode = false;

var clickListener;

this.Push = function(point) { ... }

this.Pop = function() { ... }

this.Remove = function(point) { ... }

//Enable / disable the marker placements
this.PlaceWaypoint = function(isPlacing) {
    if (isPlacing != true) {
        if (clickListener != null) {
            google.maps.event.removeListener(clickListener);
            clickListener = null;
        }
    } else {
        clickListener = map.AddEvent("click", function(event) {
            if (!IsDoubleClick()) {
                var point = map.PlaceMarker(new WayPoint(event.latLng))
                point.RemoveListener(function() { Remove(point); });
                Push(point);
            } else {
                Pop();
            }
        });
    }
}
}

Answer 1

你有一个闭包/绑定问题。一种常用的常用方法是指定一个名为自的变量，以后可以代替这个，这要归功于JS的闭包属性。

function Track(mapContainer) {
   var map = mapContainer,
       points = new Array(),
       isEditMode = false,
       clickListener,
       // Make a variable self that points to this, that can be used inside closures
       // where the original context is lost
       self = this;

   this.Push = function(point) { ... }

   this.Pop = function() { ... }

   this.Remove = function(point) { ... }

   //Enable / disable the marker placements
   this.PlaceWaypoint = 
       function(isPlacing) {
            if (isPlacing != true) {
                if (clickListener != null) {
                    google.maps.event.removeListener(clickListener);
                    clickListener = null;
                }
            } else {
                clickListener = map.AddEvent("click", function(event) {
                    if (!IsDoubleClick()) {
                        var point = map.PlaceMarker(new WayPoint(event.latLng))
                        point.RemoveListener(function() { Remove(point); });
                        // Use the closure reference self instead of this
                        self.Push(point);
                    } else {
                        // Use the closure reference self instead of this
                        self.Pop();
                    }
                });
        };
}

Answer 2

首先Pop和Push不是全局的，第二个在内部范围内有另一个含义。因此，您可以使用闭包并将“ this ”重命名为更全局范围的变量。

function Track(mapContainer) {

//....
var $this = this;

//Enable / disable the marker placements
this.PlaceWaypoint = function(isPlacing) {
    if (isPlacing != true) {
        if (clickListener != null) {
            google.maps.event.removeListener(clickListener);
            clickListener = null;
        }
    } else {
        clickListener = map.AddEvent("click", function(event) {
            if (!IsDoubleClick()) {
                var point = map.PlaceMarker(new WayPoint(event.latLng))
                point.RemoveListener(function() { $this.Remove(point); });
                $this.Push(point);
            } else {
                $this.Pop();
            }
        });
    }
}
}

Answer 3

this总是引用当前函数的上下文，因此如果在事件处理程序中使用this，则它引用该函数调用this，而不是this在Track函数中。

要创建一个访问外部作用域的this的闭包，您需要将this分配给一个可以从内部函数访问的新变量：

var self = this;
this.PlaceWaypoint = function(isPlacing) {
   // ...
   self.Pop();
   // ...
}

如何从事件处理程序调用公共方法

3 个答案: