Difference between Object.create (foo) and new object (foo)?

Question

Why is this code:

var foo = {one: 1, two: 2}; var bar = new Object( foo ); bar.three = 3; bar.one = 100; document.write(bar.one); //100 document.write(foo.one); //100 

causes bar.one and foo.one to be 100, and

 var foo = {one: 1, two: 2}; var bar = Object.create( foo ); bar.three = 3; bar.one = 100; document.write(bar.one); //100 document.write(foo.one); //1 

only affects bar.one ..

My first intuition is that since in the first code fragment we assign the link foo to bar, this means that the change will also apply to foo, while in the second code it will probably “inherit” from foo and therefore the attribute change The "subclass" of the bar won, t is applicable to its "superclass" (prototype).

Can someone please confirm that my assumption is at least on the right track? Would absolutely appreciate any answers. Thanks in advance.

Answer 1

Line:

 var bar = new Object( foo ); 

It does nothing in your first fragment - you are right with your assumption, it will simply return a reference to the same object passed to the Object constructor.

This behavior is when you pass your own object to the Object constructor in the expression new ( new Object(value) ), if you pass the object to the host object , the results are implementation dependent.

If you do not pass a value (or explicitly pass undefined or null primitives), a new object will be created that inherits from Object.prototype .

Otherwise, if you pass any of the remaining primitives (like Number, String, or Boolean value), a primitive wrapper object will be created (basically a primitive-object type conversion).

 var s = new String("foo"); // a string object wrapper typeof s; // "object" s.valueOf(); // "foo" 

^{See this question about primitives and objects: How is a Javascript string not an object?}

In your second snippet, line:

 var bar = Object.create( foo ); 

Creates a new object that inherits from foo , and since it is a different object when you assign properties:

 bar.three = 3; bar.one = 100; 

Those will be created physically on this separate instance, as you can see, in bar.one shadow property is the value contained in foo .

The object referenced by bar will actually contain two properties of its own ( one and three ), but since it inherits from foo , a property called two resolvable through a prototype chain, for example:

 bar.hasOwnProperty('one'); // true, the property is "own" bar.hasOwnProperty('two'); // false, the property is "inherited" from foo bar.two; // 2, is accessible 

In principle, the bar prototype chain looks like this:

  -----------------
                                            =========> |  Object.prototype |  ==> null
                                            |  -----------------
 | ------------- |  [[Prototype]] | --------- |
 |  one: 100 |  ======================> |  one: 1 |  (shadowed)
 |  three: 3 |  |  two: 2 |
 | ------------- |  | --------- |

 (== line denotes the prototype chain)

Answer 2

new Object and Object.create do completely different things, despite their similar sound names.

new Object() , with no argument, is equivalent to the empty object literal {} you should always use. With the argument, new Object(obj) just returns the argument.

Object.create(obj) helps unravel JavaScript corrupted by prototype inheritance. Reading this Douglas Crockford article will help. Basically, it creates a new object that inherits from obj . Therefore, if you have

 var obj1 = {x: 1}, obj2 = Object.create(obj1); obj1.x; // 1 obj2.x; // 1 obj2.x = 42; obj1.x; // 1 obj1.x = 10; obj2.x; // 10, since obj2 inherits from obj1, changing obj1 properties // changes obj2, but not the other way around.