Understanding the Difference Between Object.create and New Operator

image
Vaibhav Silar Hacker Noon profile picture

@vaibhavsilarVaibhav Silar

writing simple code is most challenging task

Most of us must have seen object creation using two methods, Object.create and new operator). 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.

Consider the below code snippet.

function Animal()
{ this.name = null;
} Animal.prototype.getName = function()
{ return this.name;
}

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:

Object.create

(proto, objectProperties)

  1. The first parameter(proto) is an existing object which is assigned to __proto__ property of newly created object. This is where prototypal inheritance happening.
  2. The second parameter creates an object having its own properties defined as a second parameter.
  3. Finally Object.create returns newly created object. So object needs to be stored in a variable.

Too theoretical….now it’s time for action.

var animalObj = Object.create(Animal.prototype)

Internally,

__proto__

property is created in an object and

Animal.prototype

is assigned to it.

So the object diagram will look like this:

image

The animalObj will not have any property/function as its own property.

New operator

We will now use

new

operator. It does following things:

  1. Creates an empty object
  2. Adds
    __proto__

    property and assigns parent object prototype to it

  3. Runs the constructor in newly created object context

Lets take below example and understand what is happening here

var animalObj = new Animal();

We are creating animal object from Animal constructor

Following steps are happening while using new keyword along with constructor

  1. new 

    operator first creates empty object. We can safely assume it is creating empty object internally

    var obj = {};
  2. then it assigns __proto__ to it and points back to Animal.prototype
    obj.__proto__= Animal.prototype
  3. It runs Animal constructor in newly created object.
    Animal.call(obj)
  4. 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 n number of variables/function using

    this

    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.

So in this case object structure would look like this.

image

Check this out,

animalObj

contains the

name

property. which is its own property.

In the era of modern Javascript frameworks if anyone is still using vanilla Javascript for inheritance then it’s better to use

Object.create

to extend one class from another, as it does not create unnecessary object variable in prototype object.

I hope that this post has been informative for you.

Tags

Join Hacker Noon

Create your free account to unlock your custom reading experience.


Post a Comment

0 Comments