1

Say we have a code example like this :

var obj1={ prop:1 };
var obj2=Object.create(obj1);
obj2.prop=2;
console.log(obj1.prop);

Here we will have output as 1 because in the child object obj2 the property prop will be shadowed. However when I do this :

var obj1={ prop:{subProp:1} };
var obj2=Object.create(obj1);
obj2.prop.subProp=2;
console.log(obj1.prop.subProp);

Here surprisingly I find that the output is 2 despite the fact that the value is being changed on the child object. Why isn't variable shadowing taking place here. In other words why isin't a new property called prop being created on obj2 and why is the prop of the parent object ( obj1 ) being manipulated here ?

EDIT : If I do the following 

var obj1={ prop:1 };
var obj2=Object.create(obj1);
var isPresent=obj2.hasOwnProperty('prop');
console.log(isPresent);

here output will be false. However :

var obj1={ prop:1 };
var obj2=Object.create(obj1);
var isPresent=obj2.hasOwnProperty('prop');
console.log(isPresent);
obj2.prop=2;
isPresent=obj2.hasOwnProperty('prop');
console.log(isPresent);

Here as you can see after the line obj2.prop=2 the output is true. That is also confusing me.

Kiran Yallabandi
  • 2,544
  • 2
  • 22
  • 25
  • 1
    You might find [*The Resolution of Property Names on Objects*](http://www.jibbering.com/faq/notes/closures/#clResO) useful. – RobG Aug 23 '15 at 22:54

1 Answers1

2

This is because when you create obj2, none of the properties gets copied but obj2's prototype become obj1. This means that on read, the engine look for properties in the whole prototype chain and on write, you just write to the object.

What happen when you do obj2.prop = 2 is that you write to obj2 directly but when you do obj2.prop.subProp = 2 you are first asking the engine to read obj2.prop and then write to that object some value.

In the second example, you never write directly to obj2 so obj2 is still "empty" (you could check that by using obj2.hasOwnProperty('prop') after each example as you suggested in a comment)

Clément Prévost
  • 8,000
  • 2
  • 36
  • 51
  • However when add this line obj2.hasOwnProperty('prop') before I set obj2.prop=2; in the first case, I get false as answer . But woudnt that imply prop does not exist in the obj2 at that point ?? – Kiran Yallabandi Aug 23 '15 at 22:17
  • Oups, I misunderstood the problem. You are totally right, I edited the answer completely to correct this mistake. – Clément Prévost Aug 23 '15 at 22:25
  • 1
    @KiranYallabandi You may find [this](https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance) quick intro to JavaScript Prototypal Inheritance useful. – Vidul Aug 23 '15 at 22:29
  • @Clement Prevost Thanks for the clarification. Currently I'm referring "you dont know JS" series of books there it is mentioned that whenever object lookup happens [[get]] is used and for object assignment [[put]] is used. Would it be possible for you to give me a link to a site where the solution to my problem is explained in those terms ?? – Kiran Yallabandi Aug 23 '15 at 22:33
  • Well, that's a very specific request, but I'm not aware of a normalised way to name those operations so unfortunately you'll have to adapt to the writer preference. – Clément Prévost Aug 23 '15 at 22:37
  • @Clement Prevost Alright but thanks anyway – Kiran Yallabandi Aug 23 '15 at 22:39