Object Prototypes in JavaScript
Understanding object prototypes can be a bit tricky for programming beginners. When trying to understand what an object prototype is in JavaScript, you may come across a definition like this:
“Prototypes are the mechanism by which JavaScript objects inherit features from one another.”
But what does that mean? Let’s try to break it down further.
First, I’d like to consult the dictionary.
Noun
1. The original or model on which something is based or formed.
2. Someone or something that serves to illustrate the typical qualities of a class; model; exemplar: She is the prototype of a student activist.
3. something analogous to another thing of a later period: a Renaissance prototype of our modern public housing.
4. Biology. an archetype; a primitive form regarded as the basis of a group.
5. verb (used with object), pro·to·typed, pro·to·typ·ing.
to create the prototype or an experimental model of: to prototype a solar-power car.
As we can see, colloquially, a prototype is essentially something that comes first in a line of similar things. This can be applied to many different subjects.
Now let’s apply it to what everything in JavaScript is made of: Objects!
An object can be described as a collection of key: value pairs. Key value pairs are the object’s properties.
const object = {key: value}While you can assign your own key: value pairs to an object, Objects in JavaScript ALSO have built in properties.
If you’ve done pretty much any programming in JavaScript, then you have almost definitely used some of these built in properties.
For example, if you’ve ever used the map method on an array, than you’ve used a built in property!
“But wait, you just said that Objects in JavaScript have built in properties, not arrays!” — That’s something you might be thinking right now, so consider this your friendly reminder that in JavaScript, arrays ARE objects!
— Check out this great article if you’d like to know more about how that works
Getting back to prototypes, one of the built in properties of an object is called — you guessed it — a prototype.
What’s a prototype? Well as we just mentioned, almost everything in JavaScript is an object, and prototypes are no exception. That’s right, a prototype is ALSO an object,
and therefore also has its own prototype, which has it’s own prototype, and so on, until a prototype’s prototype is null. This is called the prototype chain.
Objects inherit the properties of their prototypes, meaning they will take on the same characteristics.
If JavaScript does not find a property in a certain object, it will look back at each previous prototype in that object’s prototype chain until it finds it. This is what is referred to as the Prototypal Inheritance chain.
Prototyping is something that JavaScript does with objects behind the scenes which is very similar to the behavior of classes that exist in other programming languages.
While prototyping is not quite the same as classes, it functions in a way to generate a similar outcome. JavaScript also has classes too, sort of. But we’re not going to get into that right now.
Let’s look at an example of the prototype chain, and the prototypal inheritance chain.
While prototypes are built into JavaScript, we can also create new ones, and create new objects based off the prototypes.
Say we create an object called parent, and we give that object a property called favoriteFood
const parent = { favoriteFood: "onions" }Then, we create a child object, and set that object’s prototype to be the parent object
const child = {}
Object.setPrototypeOf(child, parent)Now, because the child object’s prototype is the parent object, we can still call child.favoriteFood, which will return “onions”.
Even though we didn’t give the child object a favoriteFood property directly, it inherited it from parent!
We can also continue the inheritance chain by creating another object called grandParent, giving it a property called favoriteOnion, and making the grandParent object the prototype of the parent object
const grandParent = { favoriteOnion: "sweet onion" }
Object.setPrototypeOf(parent, grandParent)And just like that, we can now call parent.favoriteOnion and child.favoriteOnion, and both will return “sweet onion”.
We can also take this further, let’s say we want our child object to be able to a different favorite onion than the parent and grandParent objects? After all, it isn’t fair to expect children to always like the same onions as their ancestors. Thankfully, JavaScript understands the complex dynamics of families and their onion preferences. To let the child object have
a different favorite onion, we can override the inherited favoriteOnion property as simply as re-assigning the value, like so
child.favoriteOnion = "green onion"Now, when we call the favoriteOnion property on the child object, it will return “green onion”, while parent and grandParent will retain their love of sweet onions. Rest assured, if
for some reason our grandParent object has a change of heart and decides to change it’s favorite onion, this will not affect the favoriteOnion property of the child and and parent objects
Of course, you’re unlikely to encounter either people or programming like this in the wild, but hopefully this example can help us all understand JavaScript’s object prototypes, and the prototypal inheritance chain a little better.