title: Entity Component System with Component prototypes
body: <p>I have an Entity Component System written in ES7. I would like to minimize its memory usage. Because lots of those entities in the system are very similar, they share the references to components that are 'same'. I call them <strong>component prototypes</strong>.</p>
  
  <p>There is a problem however. I want to be able to change the components data for one entity, without affecting other entities.</p>
  
  <p>They share same reference to the component's object. I understand that I will have to make a copy of the data and change the component reference to that copy, when I want to make the change to shared component, but I would like to do this automatically.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Entity {
   // get component // prop getter - read from reference
   // set component // clone the data
  }
  
  class Component {
     data = 'test'
  }
  
  let component = new Components()
  
  let entity1 = new Entity()
  let entity2 = new Entity()
  
  entity1.component = component
  entity2.component = component // shared entity
  
  entity2.component.data = 'test2' // now the entity should clone the component</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas how to achieve that? Thank you for any hints.</p>