RequireJS и наследование классов

Question

Я пытаюсь реализовать классическое наследование в Javascript с помощью модулей RequireJS для создания игрового движка с использованием HTML5. Я пробовал использовать Class.js у Джона Ресига, но, похоже, это не так, как я ожидал. Вот мой проект Github rep, приложение может быть запущено без сервера, если вы загружаете файлы и открываете index.html в папке клиента.

В приложении я создаю базовый класс Entity. Сущность является базовым классом для всех объектов в игре и расширяется рядом других классов. Класс спрайтов расширяет класс сущности и включает в себя методы анимации. Класс игрока расширяет класс спрайтов.

Проблема возникла, когда я создал класс с именем Image, чтобы расширить класс Entity. Оба класса Player и Image расширяют сущность (игрок отправляется entity-> sprite-> player), но когда Player устанавливает скорость, он также вызывает экземпляры изображений? Я добавил console.log, который печатает скорость объектов в функции мышления изображения (тик игры). Если вы нажмете клавиши со стрелками, чтобы заставить игрока ходить, вы увидите скорость игрока, исходящую от изображения, думающего печать.

Не должны ли они быть независимыми объектами с индивидуальными атрибутами? Это то, что я собираюсь сделать. Любые идеи о том, что я делаю неправильно, или ссылку/шаблон для правильного наследования?

Answer 1

Скорость объекта должна быть инициализирована в конструкторе, а не в определении класса (хотя в JavaScript нет такой вещи, даже с вспомогательными библиотеками, такими как Class.js Джона Ресига).

Все переменные и свойства JavaScript являются просто указателями на другое место в памяти. Ваш код просто изменил свойство свойства собственности, без фактического изменения ссылки velocity, и, следовательно, почему изменение в собственности x отражается на других объектах.

Таким образом, вместо:

var Entity = Class.extend({ 
    velocity: { x: 0, y: 0 }, 
    init: function() { } 
}); 

Вы бы:

var Entity = Class.extend({ 
    init: function() { 
    this.velocity = { x: 0, y: 0 }; 
    } 
});