difference between Object.create(Object.prototype) , Object.create(Object) and Object.create(null)

Preface: JavaScript uses prototypical inheritance, which means that an object can have (usually does have) a prototype behind it, which is another object. If you try to get the value of a property from an object that it doesn't have, the JavaScript engine looks to the object's prototype (and its prototype, and so on) to find it.

Object.create creates objects. The first argument you give Object.create is the object to use as the prototype of the object it creates. So:

// Create an object with a property 'foo'
var a = {
    foo: 42
};

// Create a blank object using `a` as its prototype
var b = Object.create(a);

// Give `b` a property of its own
b.bar = "hi";

That gives us this in memory:

                           +−−−−−−−−−−−−−−−+      +−−−−−−−−−−−−−−−−−−−+
                           | [[Prototype]] |−−−−−>| (the standard     |
a−−−−−−−−−−−−−−−−−−−−−−+−−>| foo: 42       |      | object prototype) |
                       |   +−−−−−−−−−−−−−−−+      +−−−−−−−−−−−−−−−−−−−+   
                       |
    +−−−−−−−−−−−−−−−+  |
b−−>| [[Prototype]] |−−+
    | bar: "hi"     |
    +−−−−−−−−−−−−−−−+

Proof b uses a:

console.log(b.foo); // 42
a.foo = 67;
console.log(b.foo); // 67

Addressing some of your variations:

var o = Object.create(Object.prototype);

That's exactly the same as var o = {};: It creates a new blank object whose prototype is the object Object.prototype references.

var o = Object.create(Object);

That creates a new blank object o whose prototype is the Object function. It doesn't create a function, just a non-function object that has a function as its prototype. This would be quite odd and probably isn't what you want. :-)

var o = Object.create(null);

Creates a new blank object o whose prototype is null. Since its prototype is null, it doesn't have the usual Object.prototype stuff, like toString and valueOf and hasOwnProperty. That's a bit unusual, although there are use cases for it, such as when you're using an object as a dictionary/map and don't want false positives for those property names. (In ES2015 [aka ES6] another option is to use Map instead.)

As thg435 points out in a comment below, one of the confusing things about JavaScript is that the prototype of an object is a completely different thing from the prototype property you see on functions. It would probably be better if the prototype property had had a different name (although I can't imagine what name it would be without being massively clunky).

An object (let's call it o) has a prototype object it inherits properties from. (In ES2015+ you can get access to that object via Object.getPrototypeOf.) The object on the prototype property of functions is not necessarily the prototype of any object at all. Instead, it's the object that will be assigned as the prototype of any object created via new using that function.

Examples help here.

function Foo() {
}

That function, Foo, has a property Foo.prototype that refers to an object. That object is not, yet, used as the prototype of anything. It's just an object assigned to a property called prototype on the Foo object instance.

var f = new Foo();

Now that object is used as a prototype, specifically it's the prototype of the f object created by the new Foo call.

Ignoring a couple of details, this line of code:

var f = new Foo();

...basically does this:

// Create a blank object, giving it `Foo.prototype` as its prototype
var f = Object.create(Foo.prototype);

// Call` Foo` using that new object as `this`
Foo.call(f);

As I say, that leaves out a couple of details, but hopefully it helps make it clear what the prototype property of functions is for...


What is being returned is an object.

>>> typeof Object.create(Object)
<<< "object"
>>> Object.create(Object)
<<< Function {}
//           ^^

Function is the name which Chrome addresses the object's constructor. See How are javascript class names calculated for custom classes in Chrome Dev Tools?

This part of the answer addresses @phenomnomnominal's comment in the question, explaining why the created object has inherits function properties such as call.

The Object constructor is a function, and thus inherits from the Function prototype:

>>> Object.call === Function.prototype.call
<<< true

So an object having Object as prototype will have a link to the Function prototype via prototype chain as well:

>>> Object.create(Object).call === Function.prototype.call
<<< true

And as mentioned by @TJ, using a constructor as prototype is rather odd. You should specify an object as the prototype that the created object will inherit from. @TJ already did a pretty good job explaining this part.

Tags:

Javascript

Recent Posts