javascript - What is the difference between using Object.create() and using assignment operator? - Stack Overflow

admin管理员组

文章数量:1417070

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?

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?

• javascript
• ecmascript-5
• prototypal-inheritance

Share Improve this question Follow asked Mar 9, 2013 at 7:57 JatinJatin 14.3k1818 gold badges5151 silver badges8080 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

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

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

本文标签： javascriptWhat is the difference between using Objectcreate() and using assignment operatorStack Overflow