克隆包含函数的 javascript 对象

Question

我正在编写一个具有不同形状的 javascript 图形游戏，一种猜测形状。每个都是较小形状的不同组合。shapemodel 构造函数是具有 3 种不同方法的颜色，所有函数调用各种绘图代码。我已经复制了列表的创建方式。    var shapeList = [];    var shapeArray = [            new shapeModel("#ff0", FShape1, circleSegment, miscShape1),            new shapeModel("#f00", FShape1, circleHollow, miscShape1),            new shapeModel("#000", FShape1, circleSegment, miscShape2),            new shapeModel("#08f", FShape2, circleSegment, miscShape1),            new shapeModel("#060", FShape2, circleHollow, miscShape1),            new shapeModel("#007", FShape2, circleSegment, miscShape2),            new shapeModel("#0f7", FShape1, circleHollow, miscShape2),            new shapeModel("#888", FShape2, circleHollow, miscShape2)        ];        shapeArray.forEach(function (value, index) {        shapeList.push(value);    });        function shapeModel(c, fshape, circle, misc) {            var newElement = {            shapeColour: c,            startX: 200,            startY: 200,            thickness: 6,            fullShape: function () {                fshape(this);                circle(this);                misc(this);            }        }            return newElement;    }我的问题是通过值而不是引用将整个列表复制到一个新列表，然后随机选择 8 个较大形状中的 1 个，而不会干扰原始列表。var tempList = shapeList.slice(0);不创建独立列表但至少复制所有元素var tempList = JSON.parse(JSON.stringify(shapeList));不复制函数并将它们保留为“未定义”。可能有无数的解析和字符串破解，但它变得非常混乱。我真的可以用函数来做到这一点，还是我需要重新考虑整个结构？

Answer 1

在这里解决这个问题的最简单方法如下：

转换shapeModel为类。或者更接近一堂课。它已经是你调用的构造函数new，所以你不妨使用原型继承，让你的生活更轻松。

1. ShapeModel用大写字母命名S。这是构造函数的公认约定。

2. 分配您获得的所有构造函数参数this，以便您以后可以重新使用它们。

3. 将fullShape方法移至原型。作为一个优势，您不需要为您创建fullShape的每一个函数提供一个函数ShapeModel- 内存中只有一个函数，并且所有ShapeModels 都共享它。如果你有很多这些，它会减少内存占用。

4. 添加一个.clone()方法，以便您可以从旧实例创建新实例。通过这种方式，很容易维护如何克隆东西的逻辑，并且如果你真正需要的只是克隆一种类型的对象，你不需要想出一个很难适应的超级通用克隆机制。

一旦完成，您就有了一个简单且可重用的构造函数。由于您可以获取任何对象并调用.clone()它，因此制作副本的方法很简单：

shapeArray.map(function(model) {

  return model.clone();

});

这是整个事情的样子：

function ShapeModel(c, fshape, circle, misc) {

  this.shapeColour = c;

  this.fshape = fshape;

  this.circle = circle;

  this.misc = misc;

  this.startX = 200;

  this.startY = 200;

  this.thickness = 6;

  return newElement;

}

ShapeModel.prototype.fullShape = function() {

  this.fshape(this);

  this.circle(this);

  this.misc(this);

}

ShapeModel.prototype.clone = function() {

  return new ShapeModel(this.shapeColour, this.fshape, this.circle, this.misc);

}

var shapeArray = [

  new ShapeModel("#ff0", FShape1, circleSegment, miscShape1),

  new ShapeModel("#f00", FShape1, circleHollow, miscShape1),

  new ShapeModel("#000", FShape1, circleSegment, miscShape2),

  new ShapeModel("#08f", FShape2, circleSegment, miscShape1),

  new ShapeModel("#060", FShape2, circleHollow, miscShape1),

  new ShapeModel("#007", FShape2, circleSegment, miscShape2),

  new ShapeModel("#0f7", FShape1, circleHollow, miscShape2),

  new ShapeModel("#888", FShape2, circleHollow, miscShape2)

];

var shapeList = shapeArray.map(function(model) {

  return model.clone;

});