Most of us must have seen object creation using two methods, and ). But some of you must have wondered what the difference is between the two methods. Let's dive into the them and outline the differences. Object.create new operator Consider the below code snippet. { .name = ; } Animal.prototype.getName = { .name; } ( ) function Animal this null ( ) function return this It's a pretty simple snippet. We have defined Animal constructor which has a property and a method. Now we will create object using the two methods. Using Object.create Here is the object creation using Object.create Syntax: (proto, objectProperties) Object.create The first parameter(proto) is an existing object which is assigned to __proto__ property of newly created object. This is where prototypal inheritance happening. The second parameter creates an object having its own properties defined as a second parameter. Finally Object.create returns newly created object. So object needs to be stored in a variable. Too theoretical....now it's time for action. animalObj = .create(Animal.prototype) var Object Internally, property is created in an object and is assigned to it. __proto__ Animal.prototype So the object diagram will look like this: The animalObj will not have any property/function as its own property. New operator We will now use operator. It does following things: new Creates an empty object Adds property and assigns parent object prototype to it __proto__ Runs the constructor in newly created object context Lets take below example and understand what is happening here animalObj = Animal(); var new We are creating animal object from Animal constructor Following steps are happening while using new keyword along with constructor operator first creates empty object. We can safely assume it is creating empty object internally new var obj = {}; then it assigns __proto__ to it and points back to Animal.prototype obj.__proto__= Animal.prototype It runs Animal constructor in newly created object. Animal.call(obj) Finally it returns object which we are storing in animalObj So whatever script is written in Animal constructor will run. This is where the major difference comes in because if we are defining number of variables/function using in constructor, all variables/functions will be assigned to newly created object as its own property, which may sometimes consume memory depending on the use case. n this So in this case object structure would look like this. Check this out, contains the property. which is its own property. animalObj name In the era of modern Javascript frameworks if anyone is still using vanilla Javascript for inheritance then it's better to use to extend one class from another, as it does not create unnecessary object variable in prototype object. Object.create I hope that this post has been informative for you.
