3
var foo = {x: 1}
var bar = {__proto__: foo} // __proto__ specific to implementation
var bar = Object.create(foo) // same result as above with standard API 
console.log(bar.x) // 1
foo.x = 2
console.log(bar.x) // 2
bar.x = 3
console.log(foo.x) // 2

Why did updating the inherited property x by the child object bar take no effect on the parent object foo but the opposite do?

@EDIT

After its creation the child own property remains unaffected when the parent object updates the shadowed property now. 

foo.x = 4
console.log(bar.x) // 3
sof
  • 9,113
  • 16
  • 57
  • 83
  • If it would work the other way around, then it wouldn't be inheritance... – html_programmer Dec 21 '14 at 23:59
  • 1
    This question has been asked before here: [*The assignment operator does not change properties in prototypes*](http://stackoverflow.com/questions/18820960/the-assignment-operator-does-not-change-properties-in-prototypes), but does not have a suitable answer yet. – RobG Dec 22 '14 at 00:03
  • Assigning works different than asking for the value or mutating it. More info here: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 – HMR Dec 22 '14 at 00:59

2 Answers2

4

Assigning to an object property creates or updates the object's own property, there is no search on the prototype chain for an inherited property.

See ECMAScript Simple Assignment ( = ) §11.13.1.

RobG
  • 142,382
  • 31
  • 172
  • 209
3

It's all about prototypes. bar object has no x property, so when you try to access it, prototypes chain will be involved, and you will get value of foo.x. Then you update foo.x, and while accessing bar.x you will see another value also.

But when you set bar.x, x property will be created in bar object. foo.x is another one so it will stay the same.

And you should avoid using __proto__ in your code. It's browser specific feature (that's why it has underscores in name).

Uladzislaŭ
  • 1,680
  • 10
  • 13