克隆包含函数的 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，所以你不妨使用原型继承，让你的生活更轻松。ShapeModel用大写字母命名S。这是构造函数的公认约定。分配您获得的所有构造函数参数this，以便您以后可以重新使用它们。将fullShape方法移至原型。作为一个优势，您不需要为您创建fullShape的每一个函数提供一个函数ShapeModel- 内存中只有一个函数，并且所有ShapeModels 都共享它。如果你有很多这些，它会减少内存占用。添加一个.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;});