In JavaScript every object created has a few properties built into it, one of which is called prototype. It is itself an object, so the prototype will also have a property called prototype. This loop will continue until the prototype has null for its own prototype. It is a little confusing, but give it a thought and a minute to sink in. For all the javascript developers for hire, this article is for you.
How to find a prototype of an object
To find the prototype for an object you can use the following function:
| Object.getPrototypeOf(myObject); |
Through this method you can find the Object.prototype, which is the basic most type of prototype for any object.
However, not all objects have basic prototypes. So, to find an object you can try the following code:
| const myDate = new Date(); let object = myDate; do { object = Object.getPrototypeOf(object); console.log(object); } while (object); |
Remember, this is a sample code, and running this might give you an error, “myDate” object does not exist.
How to set a prototype
You can also set a prototype of an object yourself. Object.create() and constructors are two methods to set a prototype.
Object.create()
It creates one new object and lists which object will be used for the new one’s prototype.
Check out the code:
| const personPrototype = { greet() { console.log(“hello!”); }, }; const carl = Object.create(personPrototype); carl.greet(); |
Here we are creating an object named personPrototype. This object has a method named greet(). Object.create() method is then used to set a new object prototype which is “personPrototype”. Then the greet() method is called on the newly created object, which runs and the implementation of that method is provided by the prototype.
Constructor
As mentioned above, all functions consist of “prototype” as their property. When a function is called through a constructor, then the constructor property is set as a new prototype of that object. Thus, all objects created with that constructor will have that prototype property as well.
| const personPrototype = { greet() { console.log(`hello, my name is ${this.name}!`); }, }; function Person(name) { this.name = name; } Object.assign(Person.prototype, personPrototype); |
When you go to hire JS developers next time, make sure this is one of the questions in the interview. To understand the above code, check this:
The personPrototype object has a method “greet()”. Then the constructor “Person()” initializes the object, setting the name of the person. Then personPrototype methods are called on the function’s prototype property using the Object.assign method.
Prototypes and Inheritance
All javascript developers for hire know the power of prototypes, and how flexible they make the JS code. Reusing code for other projects also becomes possible because of prototypes. You can say that prototypes are a version of inheritance.
For those who don’t know, inheritance is an OOP, object-oriented feature which programmers take advantage of to mimic parent’s properties in children objects.
We have covered what JavaScript object prototypes are, and how they are chained with each other inheriting features from the one above them in hierarchy.
