A Beginners Introduction to Prototypes in JavaScript
Whether you’re new to JavaScript or have already started practicing the language and are still unfamiliar with prototypes, this article will hopefully provide some guidance to help you better understand these objects. It is important to know what prototypes are and how they function because they are an integral part of objects. It is also a very popular question in technical interviews pertaining to JavaScript.
What are Prototypes
Prototypes are objects that are associated with almost every JavaScript object that act as a template, which inherit methods and properties. They are the mechanism that JavaScript objects inherit features from each other. An object’s properties in a prototype are accessible and modifiable, however they are not visible. It is important to know that the prototype that I am discussing is NOT the prototype property on constructor functions.
Additionally, in JavaScript, an object’s prototype (or its _proto_ property) can also have a prototype object, and that prototype can have a prototype as well! We call this prototype chaining and it is the very reason why different objects have properties and methods defined on other objects available to them. As it pertains to prototype chaining, a link is made between the object instance and its prototype, and one can locate the properties and methods by walking up the chain of prototypes. Let’s take a deeper dive into prototypes by looking to see what’s inside.
Dissecting the Prototype
I am going to show you an example for a Dog object using the console in your browser (Cmd + option + J) and I recommend you follow along. We will begin by writing a constructor function for a dog object called Dog(). The constructor function will accept a name, age, and breed, and create an object instance of a dog.
Now that we have created a constructor function for a dog object, let’s create an instance of a dog. We’ll make an instance of a dog named Fido who is a 3 year old golden retriever.
Once the dog instance for Fido has been created, if we begin typing “dog1.” you will see that the browser attempts to auto-complete your statement with the member names available on the object. On the list you will see all of the members (name, age, breed) defined in the Dog() constructor, which is now dog1’s constructor since it is a Dog object. What is essentially happening is that dog1 inherits from its prototype from the Dog() constructor.
You will also notice that there are other members of the list that were not directly defined in the Dog() constructor function. These members are actually defined on dog1’s prototype object’s prototype object. So from the inheritance from the Dog() constructor, the constructor also inherits from Object.prototype through it’s own prototype! As I discussed above, this is also known as prototype chaining. Now you’re probably asking yourself, “Can we call those methods?”. Well let’s try it out.
I called the valueOf() function on dog1, which returned to me the Dog object of Fido. The valueOf() function returns the value of the object it is called on. The reason I called the function was to review the process of how the browser found and returned the value of the object. The browser begins by checking to see if the object actually has a valueOf() method available on it from the constructor, Dog(). Since there is no method defined in the Dog() constructor called valueOf, it checks to see if dog1’s prototype object has a valueOf()method available, which it doesn’t. Finally, the browser will check the prototype object of dog1’s prototype object to find the valueOf method, which it locates and calls on!
This is a great example of how methods and properties are NOT copied from one object to the next, but they are accessed by walking up the chain of prototypes! These properties and methods that are inherited are the ones defined on the prototype property or the ones that start with Object.prototype. So methods like valueOf() are available to any object types that inherit from Object.prototype. This also includes new object instances that are created from constructors like dog1.
Conclusion
Prototypes! Aren’t they just peachy! Hopefully, this little introduction to prototypes is helpful to you as you navigate through your JavaScript journey. It is definitely not an easy concept to understand and regularly use. However, as you learn and read more about it, you will see how useful it is to understand where objects are inheriting its methods and properties. There is so much more that goes into prototypes, and a multitude of methods and properties available to explore. So I encourage you to keep learning and delve deeper! Thank you for reading and I hope you enjoyed!