Javascript 如何从事件处理程序调用public方法

我有下面的功能。 除了Push、Pop和Remove方法外，其他方法都可以正常工作。这些方法应由事件处理程序调用。此事件由google maps api触发

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

我试过用这个，但没用

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

谢谢各位

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();
            }
        });
    }
}
}

---

首先，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();
            }
        });
    }
}
}

---

首先，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();
            }
        });
    }
}
}

---

您遇到了闭包/绑定问题。一个常用的约定是，它分配一个名为self的变量that，由于JS的闭包属性，该变量可以在以后代替this

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();
                    }
                });
        };
}

---

您遇到了闭包/绑定问题。一个常用的约定是，它分配一个名为self的变量that，由于JS的闭包属性，该变量可以在以后代替this

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();
                    }
                });
        };
}

---

this

总是指当前函数的上下文，因此如果在事件处理程序中使用

this

，它指的是调用

this

的函数，而不是

Track

函数中的

this

要创建访问外部作用域的

this

的闭包，需要将该

this

分配给可从内部函数访问的新变量：

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

---

this

总是指当前函数的上下文，因此如果在事件处理程序中使用

this

，它指的是调用

this

的函数，而不是

Track

函数中的

this

要创建访问外部作用域的

this

的闭包，需要将该

this

分配给可从内部函数访问的新变量：

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

---

最好通过在函数前面添加var来将其限定在函数的范围内，否则如果我们有多个Track实例，$this变量将被覆盖，并在错误的实例上调用方法。@Machine，感谢您指出了错误，我们已经相应地修复了它。可能最好通过在函数前面添加var来将其限定在函数的范围内，否则如果我们有多个Track实例，$this变量将被覆盖，并且在错误的实例上调用了方法。@Machine，感谢您指出了错误，我们已经相应地修复了它。