I know a lot of ways to create JS objects but I didn\'t know the Object.create(null)
\'s one.
Question:
is it exactly the same as:
Creating objects by using {}
will create an object whose prototype is Object.prototype
which inherits the basic functions from Object
prototype while creating objects by using Object.create(null)
will create an empty object whose prototype is null.
They are not equivalent. {}.constructor.prototype == Object.prototype
while Object.create(null)
doesn't inherit from anything and thus has no properties at all.
In other words: A javascript object inherits from Object by default, unless you explicitly create it with null as its prototype, like: Object.create(null)
.
{}
would instead be equivalent to Object.create(Object.prototype)
.
In Chrome Devtool you can see that Object.create(null)
has no __proto__
property, while {}
does.
They are definitely not equivalent. I'm writing this answer to more fully explain why it makes a difference.
var p = {};
Creates an object that inherits the properties and methods from Object
.
var p2 = Object.create(null);
Creates an object that doesn't inherit anything.
If you are using an object as a map, and you create an object using method 1 above, then you have to be extra careful when doing lookups in the map. Because the properties and methods from Object
are inherited, your code may run into a case where there are keys in the map that you never inserted. For example, if you did a lookup on toString
, you would find a function, even though you never put that value there. You can work around that like this:
if (Object.prototype.hasOwnProperty.call(p, 'toString')) {
// we actually inserted a 'toString' key into p
}
Note that it is fine to assign something to p.toString
, it will simply override the inherited toString
function on p
.
Note that you can't just do p.hasOwnProperty('toString')
because you may have inserted a key "hasOwnProperty" into p
, so we force it to use the implementation in Object
.
On the other hand, if you use method 2 above, then you won't have to worry about things from Object
appearing in the map.
You can't check for the existence of a property with a simple if
like this:
// Unreliable:
if (p[someKey]) {
// ...
}
The value might be an empty string, might be false
, or null
, or undefined
, or 0
, or NaN
, etc. To check whether a property exists at all, you would still need to use Object.prototype.hasOwnProperty.call(p, someKey)
.
When you create an Object with Object.create(null) that means you are creating an Object with no prototype.null here means end of prototype chain. Nevertheless when you create an object like {} Object prototype will be added. Hence these are two different objects, one with prototype another without prototype.Hope this helps
If someone is looking for implementing Object.create(null)
, just to know how it works. It is written using __proto__
which is non-standard and hence, I do not recommend it.
function objectCreateMimic()
{
/*optional parameters: prototype_object, own_properties*/
var P = arguments.length>0?arguments[0]:-1;
var Q = arguments.length>1?arguments[1]:null;
var o = {};
if(P!==null && typeof P === "object")
{
o.__proto__ = P;
}
else if(P===null)
{
o.__proto__ = null;
}
if(Q!==null && typeof Q === "object")
{
for(var key in Q)
{
o[key] = Q[key];
}
}
return o;
}
Note: I wrote this, out of curiosity, and it is only written in simple terms, for instance, I am not transferring the property descriptors from the second object to the return object.