0

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?

Jatin
  • 14,112
  • 16
  • 49
  • 78

3 Answers3

6

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.

Community
  • 1
  • 1
Zeta
  • 103,620
  • 13
  • 194
  • 236
  • To elaborate on this, when you set a prototype property, if it's a simple value like a string or number, it will get set on the object itself rather than the prototype, but if you're modifying an existing object or array property, you'll change the property on the prototype. It's important to understand the distinction as it has ramifications for doing inheritance correctly; see http://www.bennadel.com/blog/1566-Using-Super-Constructors-Is-Critical-In-Prototypal-Inheritance-In-Javascript.htm for more info. – Matt Browne Mar 09 '13 at 08:14
4

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".

a better oliver
  • 26,330
  • 2
  • 58
  • 66
0

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

Naveen
  • 392
  • 4
  • 14