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?

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?

• javascript
• object-literal

Share Improve this question Follow asked Aug 10, 2015 at 7:20 O.OO.O 7,29733 gold badges3636 silver badges3232 bronze badges 1

• 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 Commented Aug 10, 2015 at 7:23

Add a ment  | 

3 Answers 3

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

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.

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'