What is the difference between an object and a prototype in prototypal programming?

Question

I'm trying to understand the "JavaScript way" of creating and using objects and I think I'm running into a misunderstanding of an object and a prototype.

In a new project I've started I've decided to try out prototypal inheritance. I'm confused if this means I should just create an object that I intend to use and then create other objects based on that using Object.create() such as:

var labrador = {
   color: 'golden',
   sheds: true,

   fetch: function()
   {
      // magic
   }
};

var jindo = Object.create(dog);
jindo.color = 'white';

Or if I should create a kind of class and that create instances of that using Object.create().

var Dog = { // Is this class-like thing a prototype?
   color: null,
   sheds: null,

   fetch: function()
   {
      // magic
   }
};

var labrador = Object.create(Dog);
labrador.color = 'golden';
labrador.sheds = true;

var jindo = Object.create(Dog);
jindo.color = 'white';
jindo.sheds = true;

Having much more experience in Class-based OOP the latter method feels more comfortable to me (and maybe that's reason enough). But I feel like the spirit of prototypal inheritance is more in the first option.

Which method is more in the "spirit" of prototypal programming? Or am I completely missing the point?

Answer 1

The prototype is just another object to which an object has an implicit reference.

When you do:

var obj = Object.create( some_object );

...you're saying that you want obj to try to fetch properties from some_object, when they don't exist on obj.

As such, your second example would be closer to the way you'd use it. Every object that is created using Object.create(Dog) will have in its prototype chain, that Dog object. So if you make a change to Dog, the change will be reflected across all the objects that have Dog in the chain.

If the main object has the same property as exists on the prototype object, that property is shadowing that property of the prototype. An example of that would be the null values you set on properties of Dog.

If you do:

var lab = Object.create(Dog);
lab.color = 'golden';

...you're now shadowing the color property on Dog, so you'll no longer get null. You're not changing Dog in any way, so if I create another object:

var colorless_dog = Object.create(Dog);

...this one will still get the null value from the prototype chain when accessing the color property.

colorless_dog.color;  // null

...until you shadow it:

colorless_dog.color = 'blue';
colorless_dog.color;  // 'blue'

So given your example:

var lab = Object.create(Dog);
lab.color = 'golden';
lab.sheds = true;

...it looks something like this:

              // labrador              // Dog
lab.color---> color:'golden'           color:null
lab.sheds---> sheds:true               sheds:null

lab.fetch()--------------------------> fetch: function() {
                                          alert( this.color ); // 'golden'
                                          // "this" is a reference to the
                                          //    "lab" object, instead of "Dog"
                                       }