CODEWITHSUNDEEP
javascriptecmascript-5prototypal-inheritance
Jatin
Jatin

Reputation: 14269

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

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?

Upvotes: 0

Views: 1600

Answers (3)

Naveen
Naveen

Reputation: 402

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

Upvotes: 0

a better oliver
a better oliver

Reputation: 26838

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

Upvotes: 4

Zeta
Zeta

Reputation: 105905

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.

Upvotes: 6

Related Questions