What is the difference between using Object.create() and using assignment operator?

Question

Here are a few examples.

// case 1:
var obj1 = {msg : 'Hello'};
var obj2 = obj1;
obj2.msg = "Hi!"; //overwrites
alert(obj1.msg); //=>'Hi!'

// case 2:
var obj1 = {msg : 'Hello'};
var obj2 = Object.create(obj1);
obj2.msg = "Hi!"; //does not overwrite
alert(obj1.msg); //=>'Hello'

// case 3:
var obj1 = {data: { msg : 'Hello'}}
var obj2 = Object.create(obj1);
obj2.data.msg = "Hi!"; //overwrites, Why?
alert(obj1.data.msg); //=>'Hi!'

I think Object.create() just gives both makes both point to the same prototype, while assignment makes both object point to same location(not just prototype). But then why is the data object being overwritten in case 3?

Answer 1

var obj2 = Object.create(obj1) creates an empty(!) object with obj1 as its prototype.

obj2.msg = "Hi!" adds(!) the property msg to obj2.

obj2.data.msg = "Hi!" looks for the property data on obj2, but obj2 is empty. So it looks for the property data on the prototype of obj2, which happens to be obj1. Then it changes msg on obj1.data to "Hi".

Answer 2

Because Object.create() only creates a shallow copy, nested objects are still referenced and not copied deeply, see 15.2.3.5 (Object.create()) and 15.2.2.1 (new Object()).

If you want to clone an object entirely have a look at How do I correctly clone a JavaScript object? and similar questions.

Answer 3

This is happening because of the way in which java script sets and retrieves properties.For getting a property it looks up the prototype chain while for setting it sets at the most local object.

In the case 2 that is why it does not override.It sets the msg property at obj2.In case 3 It fetches the data object in the parent object and sets the property there.Hence it is overridden.In case 1 they are both referring to same object