JavaScript Inheritance with “Object.create”

Mayank Gupta
Aug 19, 2019 · 5 min read

Using “Object.create” is the most basic way to create an Inheritance Model in JavaScript. Object.create can be used to create new object using the existing object as a prototype. The existing object is made available as prototype making all the properties of existing Object available to the new Object.

Lets see this method in Details.

https://gist.github.com/Mayankgupta688/5b8bc1e669e9b148030192bc87eb324b

In the above code, we are using “Object.create”, to create a new Object. Since we haven’t adding any property or Method to the new Object therefore the Object “newObject” is still empty having no method or properties.

See the image below.

The output above shows that none of the property is available to the newly created object. It still do not contain any method or properties.

But, we are passing “userInfo” object to “Object.create” function as a parameter. “userInfo” Object contains “name”, “age”, “designation” and “salary” property along with their values. Lets look into the impact of passing “userInfo” as a parameter to the function.

Can we access those property using new Object ?

When we create Object using “Object.create”, the Object passed as parameter is added to the “prototype” chain of the new Object created. When user try to access the property from the new Object created, it looks for the prototype chain available to the new Object. The JavaScript Object can traverse “prototype” chain using “__proto__” property. The “userInfo” object passed to Object.create function was added to “__proto__” property of the new Object. Lets see how can we access this prototypal chain of the Object.

When we try to access the property “name” using “newObject”, it first looks for the properties that are available to this Object. Since we do not have any property added to this Object, it traverses to the “prototype” chain using the Object reference “__proto__”. The “__proto__” property points to the reference of “userInfo” object.

Since the properties “name” is available in the Object which is pointed by “__proto__” property, we can access the property “name” using the newly created Object. The properties “name”, “age”, “designation” and “salary” is available to the new Object using the prototypal chain.

In short, it represents the Parent Child relationship, if the property in not found in an Object being referred, it traverses its prototype chain to find the property/method in the Parent Object. If the property/method is available in the Prototype Chain, we can access those property and methods.

The above lines of code, we are using “===”, it state that “userInfo.name” and “newObject.__proto__name” point to the same memory location.

Accessing Method of the Prototypal Chain

Till now, we have talked about accessing the properties from the Prototype Chain. We can also access the methods available in the prototype chain. Lets look with the help of an example.

https://gist.github.com/Mayankgupta688/d4774188752ba32d82b04797935a73db

Overriding the values of Prototype Chain

“name” property is available in the Prototype Chain of the newly created Object. We can add the property with the same name to the new Object. When we add the property with the same name to the new Object, it gets added to the property of new Object. If the user tries to access/modify the “name” property, it refers to the property added to the Object, rather than accessing the name property from the prototype chain.

https://gist.github.com/Mayankgupta688/2eb401b5098b466c14d6d56762172ebf

In the above code, we can see that, we are adding the property to the newly created Object. In this case the Object will be having a new property available to itself and it will access/modify its own property, rather than referring to the parent property.

In the image above, we can see that the “name” property is added to the newly created Object “newObject”.

Lets look into Advantages and Disadvantages of this Method:

Advantages of Object.create

  1. All the methods and Properties which are available to the “userInfo” object is available to the new Object that is created, since it exists as the part of prototypal Chain. We can use this method and take advantage of function and property re-usability.

The Property is made available through the prototypal chain, so the object need not to consume more memory space to save the existing Functions and Properties. No separate memory space is consumed. So the methods and the properties can be reused.

This method provides function and property re-usability in cases when we have some hierarchical data representation / or if we need to show some inheritance traits from Source Object to Destination Object

Disadvantages of “Object.create”

  1. The newly created Object do not create a separate property. Modifying the property from the Source Object, modifies the data available to the new Object also.

The developer may assume that the property belongs to the new Object created. Modifying the property or Function in Source Object are reflected in Destination/new Object Created.

If you want to have dedicated ”name” property to each Object created using “Object.create”, we need to add property explicitly to newly created Object. In the below code, we have added separate property to the new Object Created, So in this case it will not access the “name” data from Prototype Chain.

https://gist.github.com/Mayankgupta688/c08b4c7f35e818f922f09ff6e1032350

2. Do not create the Deep Copy for the Object

It do not create the Deep copy, the Object follow the Concept of Inheritance. So the new Object do not contains separate properties and methods. The properties and methods are accessed from the parent in the Inheritance Chain.

TechnoFunnel

TechnoFunnel focus on learning and understanding the programming concepts

Sign up for TechnoFunnel

By TechnoFunnel

Getting stared with Latest Technologies. Connect with us for more detailed articles and in-depth explanation of many frontend and backend Technologies and concepts Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store