对象中的对象和分配原型

Question

我有以下对象：

var level2blocks = {
    block1 : {
        left : 478,
        right : 515,
        up : 0,
        down : 510
    },
    block2 : {
        left : -10,
        right : 515,
        up : 373,
        down : 600
    }
};

我需要保留对象的名称 "block1" 和 "block2"，因为我在其他函数中调用它们，基于玩家在 html5-canvas 中的位置。我还想将它们保存在对象 "level2blocks" 中，因为最终我将拥有大约 20 个这样的块。

如果可以分配给 block1 和 block2 原型，那么我就不必每次都键入所有 4 个参数？这是我要使用的原型：

var Block = function (left,right,up,down) {
    this.left = -10;
    this.right = 515;
    this.up = 0;
    this.down = 600;
}

所以我的想法是我将只传递例如 2 个参数，比如只传递 left 和 down。缺失值将从原型值中获取。

例如：

   var level2blocks = {
        block1 : {
            left : 478,
            right : 515,
        },
        block2 : {
            left : -10,
            down : 600
        }
    };

然后在函数中调用 level2blocks.block1.down 时它将引用默认值...

Answer 1

var level2blocks = {
    block1: new Block(478, 515, 0, 510),
    block2: new Block(-10, 515, 373, 600)
};

Answer 2

您可以执行如下操作。 Block 是 Class 用于内部块，Level2blocks 是 Class 用于管理这些块。 Level2blocks对于内部blocks可以有add、remove等方法。

在这种情况下，您也可以使用原型值作为默认值，就像我在 BlockProto Class 中所做的那样。

function extend(obj, props) {
  for (var prop in props) {
    if (props.hasOwnProperty(prop)) {
      obj[prop] = props[prop];
    }
  }
}

function Block(left, right, up, down) {
  this.left = left || -10; // for default values
  this.right = right || 515;
  this.up = up || 0;
  this.down = down || 600;
}

function BlockProto(obj) {
  extend(this, obj);
}

BlockProto.prototype.left = -10;
BlockProto.prototype.right = 515;
BlockProto.prototype.up = 0;
BlockProto.prototype.down = 600;

function Level2blocks() {
  this.blocks = {};
}

Level2blocks.prototype.addBlock = function(left, right, up, down) {
  var numOfBlocks = Object.keys(this.blocks).length;
  this.blocks['block' + numOfBlocks] = new Block(left, right, up, down);
};

Level2blocks.prototype.addPrototypeBlock = function(obj) {
  var numOfBlocks = Object.keys(this.blocks).length;
  this.blocks['block' + numOfBlocks] = new BlockProto(obj);
};

var level2Blocks = new Level2blocks();

level2Blocks.addBlock(2, 4, 2, 4);
level2Blocks.addBlock(123, 2, 090, 24);
level2Blocks.addBlock();
level2Blocks.addBlock(undefined, undefined, undefined, 900);

level2Blocks.addPrototypeBlock({});
level2Blocks.addPrototypeBlock({
  left: 4444
});


console.log(level2Blocks.blocks);
console.log(level2Blocks.blocks.block4.left);
console.log(level2Blocks.blocks.block4.right);

var HTMLStr = '<pre>' + JSON.stringify(level2Blocks.blocks, 0, 4) + '</pre>';

HTMLStr += 'Block4 values from prototype: ';
HTMLStr += [level2Blocks.blocks.block4.right, level2Blocks.blocks.block4.left, level2Blocks.blocks.block4.up, level2Blocks.blocks.block4.down].join(', ');

HTMLStr += '<br/> Block5 values from prototype: ';
HTMLStr += [level2Blocks.blocks.block5.right, level2Blocks.blocks.block5.left, level2Blocks.blocks.block5.up, level2Blocks.blocks.block5.down].join(', ');

document.write(HTMLStr);

<div id="out"></div>

对象中的对象和分配原型

Objects within Object and assigning prototype

javascript

html5-canvas