Change value of object property inside javascript object affect other object

Question

I would like to change a property of an object, inside an object. But, when I did that, other object property that created using the same prototype also changed.

The code is as follows:

var a = {
  x: { y: 'foo' }
}

var b = Object.create(a)
var c = Object.create(a)

console.log(a.x.y) // 'foo'
console.log(b.x.y) // 'foo'
console.log(c.x.y) // 'foo'

b.x.y = 'bar'

var d = Object.create(a)

console.log(a.x.y) // 'bar'
console.log(b.x.y) // 'bar'
console.log(c.x.y) // 'bar'
console.log(d.x.y) // 'bar'

I think the problem is because all objects referring the same x, therefore changing y from any object reflected in all objects. Can anyone explain what really happened here, perhaps with reference and suggestion for a workaround?

x is just a reference to the same object. One way around it would be simply to create x as a property using the Object.create propertiesObject parameter — CodingIntrigue
– CodingIntrigue, Commented Aug 10, 2015 at 7:23

smnbbrv · Accepted Answer · 2015-08-10 07:24:55Z

2

x is an object, that is why it is referenced by a pointer and not by the value like the string is.

Try the following as a workaround:

b.x = { y: 'bar' } // instead of b.x.y = 'bar'

this creates a new object x which will be different from others

answered Aug 10, 2015 at 7:24

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andre Andersen · Accepted Answer · 2015-08-10 07:24:08Z

1

Try this:

var a = function() {
    this.x = { y: 'foo '};
}

var b = new a();
var c = new a();

b.x.y = 'bar';

You will just reference the same object (reference pointer to a place in memory), and modify the object that each object reference to. What you probably want to do is create a new object that are isolated.

answered Aug 10, 2015 at 7:24

Andre Andersen

1,2111 gold badge11 silver badges20 bronze badges

Comments

Amit · Accepted Answer · 2015-08-10 07:36:01Z

Object.create creates a new object and sets its prototype to the first parameter passed in. In your case that's an instance of an object (a), but you use that same instace as the prototype for b & c. So... when accessing members of the prototype of b, you really accessing members of a (via prototypical inheritance). Modifying that applies to all inheriting objects

In order to achieve the inheritance you tried, while using Object.create AND separating all instances, do this:

function a() {
  this.x = { y: 'foo' }
}

var b = Object.create(new a())
var c = Object.create(new a())

//console.log(a.x.y) // a is not an object, it's a function, or a "type"
console.log(b.x.y) // 'foo'
console.log(c.x.y) // 'foo'

b.x.y = 'bar'

var d = Object.create(new a())

//console.log(a.x.y) // a is not an object, it's a function, or a "type"
console.log(b.x.y) // 'bar'
console.log(c.x.y) // 'foo'
console.log(d.x.y) // 'foo'

Collectives™ on Stack Overflow

Change value of object property inside javascript object affect other object

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related