Is there any reason to use Object.create() or new in JavaScript?

Question

I've been using the new keyword in JavaScript so far. I have been reading about Object.create and I wonder if I should use it instead. What I don't quite get is that I often need to run construction code, so I don't see how Object.create is going to work at all since it does not trigger any functions to run.

Could anyone tell me, In which case should I use Object.create instead of new?

Answer 1

So far, if you want to create an object, you can only use literals:

var obj = {};

or the Object constructor.

var obj = Object();

But none of these methods let you specify the prototype of the created object.

This is what you can do with Object.create now. It lets you create a new object and sets the first argument as prototype of the new object. In addition, it allows you to set properties of the new object provided as second argument.

It is similar to doing something like this (without the second argument):

function create(proto) {
    var Constr = function(){};
    Constr.prototype = proto;
    return new Constr();
}

So if you are using a construct similar to this, this when you wanted to use Object.create.

It is not a replacement for new. It is more an addition to make creating single objects which should inherit from another object simpler.

Example:

I have an object a:

var a = {
   someFunction: function() {}
};

and I want b to extend this object. Then you can use Object.create:

b = Object.create(a);
b.someOtherFunction = function(){};

Whenever you have a constructor function, but you only instantiate one object from it, you might be able to replace this with Object.create.

There is general rule that applies. It depends very much on what the constructor function is doing and how you inherit from other objects, etc.

Answer 2

As already mentioned, Object.create() is commonly used when you want an easy way to set the prototype of a new object. What the other answers fail to mention though, is that constructor functions (which require new) are not all that different from any other function.

In fact, any function can return an object, and it's common in JavaScript to see factory functions (like constructors, but they don't require new, or use this to refer to the new object). Factory functions often use Object.create() to set the prototype of the new object.

var barPrototype = {
  open: function open() { /* ... */ },
  close: function close() { /* ... */ },
};
function createBar() {
  return Object.create(barPrototype);
}

var bar = createBar();

Answer 3

Super late to this thread.. but I think an important distinction that needs to be made is that while constructors are just functions, the new operator invokes the function and captures the resulting object which can be useful when in a dynamic environment. It allows reference to properties and methods during execution of the constructor as well which may or may not be useful depending on the situation. 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.

some simple examples..

var Foo = function(element) {
  this.elem = element;
  $(this.elem).css('color', 'blue');
  // using the new operator here gives access to this.elem
  // immediately after that declaration is made, thus providing 
  // a comfortable dynamic system to work with 
}

var bar = new Foo(someElem);

as apposed to..

var foo = {
  elem : element,             // assume elem exists
  $(this.elem).css('color', 'blue')// in the lexical scope
}

var bar = Object.create(foo);
// This.elem does not exist until the object is returned now
// and the .css method call will not execute

It should be slightly clearer why you would want to use one over the other, as another simple breakdown...

Use New when you care about having a dynamic object and less about the prototype chain

Use Object.create when you care less about being dynamic and more about having an explicit prototype chain. I will also note that objects made with Object.create can be dynamically built as well by using a method called init that you can build to assign properties based on your needs and simply call it on your freshly returned object.

Each approach has it's ups and downs however their use cases are fairly distinct in my opinion. However, you will most likely find yourself using Object.create as most situations will call for a less dynamic situation and have more need for inheritance.

Answer 4

The exact source code for the Object.create() function is:

function Object.Create(proto, propertiesObject)
{
    var obj = {};

    Object.setPrototypeOf(obj, proto);

    if(propertiesObject)
    {
        Object.defineProperties(obj, propertiesObject);
    }

    return obj;
}