Change value of object property inside javascript

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?

Answer 1

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

Answer 2

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.

Answer 3

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'