Difference between object and object.prototype in Javascript

Question

Ok so here's a bit of code that i am working with atm.

My Problem is that I don't really get the difference between an object and an object prototype. Up until now I thought, if I make a new Object, e.g. new Memory, this inherits all the properties I declared in Memory. In my code, however, i need to add options to Memory.prototype.

So my core question is: What is the difference between properties of the object and properties of the object.prototype?

Edit: to specify: in the Memory function I log this.options. This doesn't work, unless I include Memory.prototype.options = {...}. If a new Memory inherits the properties from Memory and I defined e.g this.options.availableCards just above, why do I need to add options to the prototype?

var createMemory = function (){
        new Memory( {wrapperID: 'memory-game'} );
      };

      var Memory = function (options) {
        //check for required options
        if ((options.wrapperID === undefined)){
          console.error('ERROR: not all required options given. wrapperID is required!');
          return false;
        }

        //hardcoded values
        this.options.availableCards = 22;
        this.options.cols = 4;
        this.options.rows = 4;
        this.options.fliptime = this.options.flipTime || 1; //set default
        this.options = extend({}, this.options);
        extend(this.options, options);
        //this._init();
        console.log(this.options);

      };

       // why is this required?
       Memory.prototype.options = {
         onGameEnd: function(){
           return false;
         }
       };

       createMemory();

that's a function that is declared further up in the code, don't worry about it — Gabriel Roda Eugen Bach, Nov 10 '16 at 11:36

Emil S. Jørgensen · Accepted Answer · 2016-11-10T11:45:47.547

You forgot to return the new object in createMemory.

A few other fixes as well and i had to invent an extend function, since you didn't include yours.

//Extend function
function extend(a, b) {
    for (var i in b) {
      if (b.hasOwnProperty(i)) {
        a[i] = b[i];
      }
    }
    return a;
  }
  //Memory class

function Memory(options) {
  //check for required options
  if ((options.wrapperID === undefined)) {
    console.error('ERROR: not all requried options given. wrapperID is requried!');
    return false;
  } // hardcoded values

  this.options.availableCards = 22;
  this.options.cols = 4;
  this.options.rows = 4;
  this.options.flipTime = this.options.flipTime || 1;
  this.options = extend({}, this.options);
  extend(this.options, options);
  //this._init();
};
Memory.prototype.options = {
  onGameEnd: function() {
    alert("Inherited")
  }
};
//Instantiater
function createMemory() {
  return new Memory({
    wrapperID: 'memory-game'
  });
};

//Instantiate
var m = new createMemory();
//Call inherited
console.log(m);
m.options.onGameEnd();

Properties of the Object is specific to that instance of the object, while properties of the Prototype is shared among instances of the object.

If, for instance, you have an ID number for each instance, then the ID property needs to be on the Object since it would be unique to that instance.

Conversely, if you had a method that was the exact same of all instances, then you can save on memory by putting it in the Prototype and simply inherit it.

thanks for that however, my question isn't why my code works/doesn't work but rather a general question about objects and prototypes — Gabriel Roda Eugen Bach, Nov 10 '16 at 11:37
okay, that helps me, say, 75% what i still don't get now is: when i create a new Memory m, it takes all the properties from the prototype, right? but shouldn't it take all the properties that i defined in the function Memory anyways? m is constructed with the "plan" of Memory after all — Gabriel Roda Eugen Bach, Nov 10 '16 at 12:23
It does take all the elements you define withing `Memory`. You can always overwrite prototype properties on a specific instance. — Emil S. Jørgensen, Nov 10 '16 at 12:26

Difference between object and object.prototype in Javascript

1 Answers1