Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript inheritance: Object.create vs new

People also ask

What is the difference between object create vs New?

The object used in Object. create() actually forms the prototype of the new object, whereas in the new Function() from the declared properties/functions do not form the prototype. You cannot create closures with the Object.

Should I use object create or new?

If you are more concerned with having a set prototype but the object itself is more static than not, Object. create would be a better option as it is cleaner and doesn't mess with the proto-chain in unexpected ways as the new operator does.

What is the difference between object assign and object create?

Create method is used to create object instance with an already declared object properties and it's prototype and assign it to a newly created prototype object and return's empty object. Assign method is used to assign object properties from source object to the target object and also return's the new object.

How does JavaScript create inheritance?

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype.


In your question you have mentioned that Both examples seem to do the same thing, It's not true at all, because

Your first example

function SomeBaseClass(){...}
SomeBaseClass.prototype = {
    doThis : function(){...},
    doThat : function(){...}
}
function MyClass(){...}
MyClass.prototype = Object.create(SomeBaseClass.prototype);

In this example, you are just inheriting SomeBaseClass' prototype but what if you have a property in your SomeBaseClass like

function SomeBaseClass(){ 
    this.publicProperty='SomeValue'; 
}

and if you use it like

var obj=new MyClass();
console.log(obj.publicProperty); // undefined
​console.log(obj);​

The obj object won't have publicProperty property like in this example.

Your second example

MyClass.prototype = new SomeBaseClass();

It's executing the constructor function, making an instance of SomeBaseClass and inheriting the whole SomeBaseClass object. So, if you use

    var obj=new MyClass();
    console.log(obj.publicProperty); // SomeValue
    console.log(obj);​

In this case its publicProperty property is also available to the obj object like in this example.

Since the Object.create is not available in some old browsers, in that case you can use

if(!Object.create)
{
    Object.create=function(o){
        function F(){}
        F.prototype=o;
        return new F();
    }
}

Above code just adds Object.create function if it's not available so you can use Object.create function and I think the code above describes what Object.create actually does. Hope it'll help in some way.


Both examples seem to do the same thing.

That's true in your case.

When would you chose one over the other?

When SomeBaseClass has a function body, this would get executed with the new keyword. This usually is not intended - you only want to set up the prototype chain. In some cases it even could cause serious issues because you actually instantiate an object, whose private-scoped variables are shared by all MyClass instances as they inherit the same privileged methods. Other side effects are imaginable.

So, you should generally prefer Object.create. Yet, it is not supported in some legacy browsers; which is the reason you see the new-approach much too frequent as it often does no (obvious) harm. Also have a look at this answer.


The difference becomes obvious if you use Object.create() as it is intended. Actually, it does entirely hideout the prototype word from your code, it'll do the job under the hood. Using Object.create(), we can go like

var base =  {
    doThis : function(){
    },

    doThat : function(){
    }
};

And then we can extend/inherit other objects from this

var myObject = Object.create( base );
// myObject will now link to "base" via the prototype chain internally

So this is another concept, a more "object oriented" way of inherting. There is no "constructor function" out of the box using Object.create() for instance. But of course you could just create and call a self defined constructor function within those objects.

One argument for using Object.create() is that it might look more natural to mix/*inherit* from other objects, than using Javascripts default way.