И снова наследование

[hedgehog]

Только начинаю осваивать JavaScript. Столкнулся с ситуацией, которую не знаю как разрулить правильней. Пишу анимацию на canvas, данные получаю через JSON в виде массива. Получаемые данные выглядят так:

{
  "Options":{
    "Width":123,
    "Height":321
  },
  "Objects":[
    {
      "name":"xxx",
      "x":123,
      "y":123,
      "image":"xxx.png"
    },
    {
      "name":"xxx",
      "x":123,
      "y":123,
      "image":"xxx.png"
    }
  ]
}

Если я правильно понимаю, то свойство Objects содержит индексированный массив объектов со свойствами, с которыми я работаю. Хочется построить прототип, имеющий некоторые методы (например, draw) и который будут наследовать все полученные объекты. Например:

function pictures(name,x,y,image){
  this.name=name;
  this.x=x;
  this.y=y;
  this.image=image;

  this.draw=function(){
    ctx.drawImage(this.image,this.x,this.y);
  }
}

Конечная цель:

- Получить объекты через JSON, где каждый объект содержит свойства: имя, координаты, имя файла

- Отрисовать на канвасе эти объекты (картинки).

Могу я заставить полученные из JSON объекты наследовать pictures? Или мне нужно для каждого из объектов вызывать конструктор pictures?

[Great Rash]

var JSON = {
  "Options":{
    "Width":123,
    "Height":321
  },
  "Objects":[
    {
      "name":"xxx",
      "x":123,
      "y":123,
      "image":"xxx.png"
    },
    {
      "name":"xxx",
      "x":123,
      "y":123,
      "image":"xxx.png"
    }
  ]
};

function Picture(settings){
  this.name = settings.name;
  this.x = settings.x;
  this.y = settings.y;
  this.image = settings.image;

  this.draw = function(){
    ctx.drawImage(this.image, this.x, this.y);
  }
}

var pics = [];

for (var i = 0; i < JSON.Objects.length; i++) {
  var obj = JSON.Objects[i];
  pics.push(new Picture(obj));
}

// в массиве pics будут лежать готовые объекты

Если нужно именно наследование, то как-то так:

function Picture(){
  this.name = '';
  this.x = 0;
  this.y = 0;
  this.image = null;
}

Picture.prototype.draw = function(ctx) {
  if (this.image) {
    ctx.drawImage(this.image, this.x, this.y);
  }

  return;
}

for (var i = 0; i < JSON.Objects.length; i++) {
  JSON.Objects[i].prototype = new Picture();
}

// только конструктор будет у всех Picture

[hedgehog]

Я пробовал второй вариант, в результате у JSON.Objects появляется свойство prototype (а не ссылка на прототип), которое содержит объект, наследующий Pictures. Вызов draw при этом возможен только так:

JSON.Objects.prototype.draw();

А за первый вариант - спасибо.

[troll]

Если нужны прототипы, можно скрестить первый вариант со вторым:

var pics = [];

function Picture(settings){
  this.name = settings.name;
  this.x = settings.x;
  this.y = settings.y;
  this.image = settings.image;
}

Picture.prototype.draw = function(ctx) {
  if (this.image) {
    ctx.drawImage(this.image, this.x, this.y);
  }

  return;
}

for (var i = 0; i < JSON.Objects.length; i++) {
  pics.push(new Picture(JSON.Objects[i]));
}

Или вот так сделать, но работать будет только в Firefox и вебкитных:

function Picture(){}

Picture.prototype.draw = function(ctx) {
  if (this.image) {
    ctx.drawImage(this.image, this.x, this.y);
  }

  return;
}

for (var i = 0; i < JSON.Objects.length; i++) {
  JSON.Objects[i].__proto__ = Picture.prototype;
}

Edited April 7, 2012 by troll