Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

The JavaScript Prototype Property — Visualized

One of the more (controversially)interesting con­cepts in JavaScript is that of the pro­to­type prop­erty. If you are for­tu­nate, you get it at first sight. If not, you will find your­self learn­ing and relearn­ing about it every-time you come across it.

To avoid this vicious cir­cle of relearn­ing, we cre­ated that neat lit­tle dia­gram that you saw on top that you can visu­al­ize when­ever you are try­ing to under­stand what is hap­pen­ing in the code before your eyes.

javascript prototype property


When you think about pro­to­type prop­erty, just keep 4 things in mind.

  1. Only func­tions have a pro­to­type property.
  2. Every object in javascript has a hid­den prop­erty called ‘proto’ that con­nects it to the pro­to­type prop­erty of its con­struct­ing function.
  3. An object only has read­Only access to its constructor’s prototype.
  4. If you try to get a prop­erty on an object and the object does not have it, it will be looked up in the pro­to­type of the object’s con­struc­tor. If found there, its value will be returned. If not found, it will be looked up at the Con­struc­tor of this con­struc­tor. (Since func­tions are also objects in JavaScript, even they have a con­struc­tor). This is called the pro­to­type chain. You might need to come back to this point when read­ing the snip­pets that follow.

That said, look at fol­low­ing code snip­pets and see the dia­gram for clarity.

// Create a function
function Car(){}

// Create properties on the prototype
Car.prototype.wheels = 4;
Car.prototype.steeringWheel = 1;
Car.prototype.color = 'metallic';

// Create objects
var car1 = new Car();
var car2 = new Car();

// Car is now the constructor function for 'car1' and 'car2'

// We didn't define any properties on car1 and car2
console.log(car1.stereo) ; // Prints undefined
console.log(car2.gps) ; // Prints 'undefined'

// In spite of that, it seems that both car1 and car2 can 'see' the properties defined on its constructor's prototype (See point 4 about the prototype chain)
console.log(car1.wheels); // Prints 4
console.log(car2.wheels); // Prints 4

console.log(car1.steeringWheel); // Prints 1
console.log(car2.steeringWheel); // Prints 1

// Remember, they can only 'see' the parent property. If they try to overwrite it, a property of the same name is created on the object itself which shadows the property on the prototype
car1.wheels=3; // Thats a strange car indeed!
console.log(car1.wheels); // Prints 3

// To prove that the prototype still has the property intact
console.log(car2.wheels) ; // Still prints 4
console.log(Car.prototype.wheels) ; // Checking directly at the Constructor. Prints 4

To change the value of the prototype property, you gotta change it directly at the constructor.

Car.prototype.wheels = 5;

console.log(car2.wheels); // Prints 5
console.log(car1.wheels); // Prints 3 since it has its own 'wheels' property

// In the same way, if you look at the diagram, since we overwrite the color property in car1 and car2
console.log(car1.color); // Prints blue - its own property hides the prototype property
console.log(car2.color); // Prints red - its own property hides the prototype property

// whereas
console.log(car1.steeringWheel); // Prints 1- from the prototype chain
console.log(car2.steeringWheel); // Prints 1- from the prototype chain

To explain point 4 more in a more fun way, think about an object as a child. If you ask it some­thing, and it does not know about it, I will ask its mom. And if she does not know, she will ask hers. And this goes on until either an answer is found or there are no more moms in the ances­try. How­ever, if the child knows an answer, it ends right there.

A good side effect of the pro­to­type prop­erty is that you can cre­ate prop­er­ties on the func­tion pro­to­type and they will automag­i­cally become avail­able to all of the instances cre­ated from that function.

And that, my friend, is the pro­to­type prop­erty for you, in a nutshell.

You may also like...

  • Jamie Strauss

    No dia­gram 🙁

    • tuto­ri­al­hori­zon

      Whoops. Looks like our recent theme change blew away the dia­gram. Let me fix that for you. Thanks for let­ting me know.