每次单击按钮时如何创建新对象并将旧对象存储在数组中？面向对象的 JavaScript答案

【问题标题】：How to create new object and store the old in array each time when button clicked? OOP JavaScript每次单击按钮时如何创建新对象并将旧对象存储在数组中？面向对象的 JavaScript
【发布时间】：2012-05-22 23:48:33
【问题描述】：

如何每次单击“创建新多边形”按钮时，将最后一个对象存储在数组中并创建一个新的干净对象以在地图上绘制新的分离折线。我想保留旧折线的功能。现在无法清洁物体。简化示例如下所示。

HTML：

<button onclick="create()">Create New Poly</button>
<div id="map" style="width: 500px; height: 400px;"></div>

JS：

var map;
var listener;

var polys = [],
    poly = {};

create = function() {
    poly = new Poly();

    if ( !! listener) google.maps.event.removeListener(listener);
    listener = google.maps.event.addListener(map, 'click', function(e) {
        poly.addPoint(e.latLng);
    });
}

function Poly() {
    this.markers = [];
    this.setMap(map);
    polys.push(this);
}
Poly.prototype = new google.maps.Polyline();

Poly.prototype.addPoint = function(p) {
    var m = poly.createMarker(p);
    poly.markers.push(m);
    poly.getPath().push(p);
}

Poly.prototype.createMarker = function(p) {
    var marker = new google.maps.Marker({
        position: p
    });
    marker.setMap(this.getMap());
    return marker;
}

$(function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

演示：JSFIDDLE

【问题讨论】：

标签： javascript

【解决方案1】：

即使按照 Ben Davis 的建议 http://jsfiddle.net/LxGmR/ 进行操作，问题仍然存在。

我认为这是由于所有 Ploy 对象共享相同的原型：Poly.prototype = new google.maps.Polyline();。我认为解决方法是每个新的Ploy 对象都需要自己的原型google.maps.Polyline 实例。

经过测试，我发现是真的：http://jsfiddle.net/uhZFE/

然后我查找了如何在没有包装函数的情况下执行此操作，我使用了 SO 答案https://stackoverflow.com/a/6519265/388787 中描述的方法（http://javascript.crockford.com/prototypal.html 也很有帮助）并生成了http://jsfiddle.net/YgSwF/，如下所示；它按您的要求工作：

var map;
var listener;

var polys = [];

create = function () {
  var poly = new Poly();

  if ( !! listener) google.maps.event.removeListener(listener);
  listener = google.maps.event.addListener(map, 'click', function (e) {
    poly.addPoint(e.latLng);
  });
  polys.push(poly);
}

function Poly() {
  google.maps.Polyline.call(this);
  this.markers = [];
  this.setMap(map);
}
Poly.prototype = Object.create(google.maps.Polyline.prototype);

Poly.prototype.addPoint = function (p) {
  var m = this.createMarker(p);
  this.markers.push(m);
  this.getPath().push(p);
}

Poly.prototype.createMarker = function (p) {
  var marker = new google.maps.Marker({
    position: p
  });
  marker.setMap(this.getMap());
  return marker;
}

$(function () {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(48.864715, 10.546875),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
});

【讨论】：

我明白，我需要完整版才能做到这一点，但我还没有这方面的经验。谢谢。
我现在知道了，我将用不需要包装函数的答案更新答案。

【解决方案2】：

我相信您的问题与变量范围有关。您应该在 create() 函数中声明 poly。另外，我认为在 create() 函数中将创建的对象推送到数组中以遵守关注点分离会更有意义。

此外，在您的 addPoint() 函数中，当您应该使用“this”时，您指的是全局 poly 变量。

更新代码：

var map;
var listener;

var polys = [];

create = function() {
    var poly = new Poly();

    if ( !! listener) google.maps.event.removeListener(listener);
    listener = google.maps.event.addListener(map, 'click', function(e) {
        poly.addPoint(e.latLng);
    });
    polys.push(poly);
}

function Poly() {
    this.markers = [];
    this.setMap(map);
}
Poly.prototype = new google.maps.Polyline();

Poly.prototype.addPoint = function(p) {
    var m = this.createMarker(p);
    this.markers.push(m);
    this.getPath().push(p);
}

Poly.prototype.createMarker = function(p) {
    var marker = new google.maps.Marker({
        position: p
    });
    marker.setMap(this.getMap());
    return marker;
}

$(function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(48.864715, 10.546875),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

【讨论】：