Javascript 从 1 个对象创建 2 个实例

Question

我有两个 DIV 容器，每个容器都包含一个拼图(使用 jquery 可拖动对象实现)。

我还得到了一个如下所示的对象:

var puzzle var puzzle = {
    option1 = [],
    init:function(container) { .... }
}

要为我使用的一个 DIV 开始拼图:

// left puzzle div
var puzzleLeft = puzzle;
puzzleLeft.init(leftContainer);

// right puzzle div
var puzzleRight = puzzle;
puzzleRight.init(leftContainer);

但对于左边的来说它不起作用。我要做的所有事情都发生在右边:/当我取消注释右边的开始代码时，它将适用于左边:) 好像是正确的一开始代码是错误的？ 这是创建 2 个拼图实例的错误方法吗？

谢谢 马特

Answer 1

原型(prototype)继承

您的标题为“从 1 个对象创建 2 个实例”。上面写满了原型(prototype)继承。

您可以使用Object.create创建一个继承自另一个对象的对象。

// left puzzle div
var puzzleLeft = Object.create(puzzle);
puzzleLeft.init(leftContainer);

// right puzzle div
var puzzleRight = Object.create(puzzle);
puzzleRight.init(leftContainer);

但是，任何引用对象的属性都需要在 init 函数中设置。像这样的事情:

var puzzle = {

    // Let it be null for now
    option1: null,

    init: function(container) {
        // Set it to empty array inside init
        this.option1 = [ ];
    }

};

这将确保 puzzleLeft 和 puzzleRight 使用不同的数组。

---

克隆

如果您使用的是 jQuery 这样的库，另一个选择是简单地克隆对象。

// left puzzle div
var puzzleLeft = $.extend({ }, puzzle);
puzzleLeft.init(leftContainer);

// right puzzle div
var puzzleRight = $extend({ }, puzzle);
puzzleRight.init(leftContainer);

使用 $.extend({ }, someObject) 将复制 someObject。