Why when I use reflection on this JavaScript object I can't see a property defined in its prototype object?

Question

I am pretty new in JavaScript and I am actually studying the reflection concept on a tutorial.

So I have the following code:

/* REFLECTION AND EXTEND:

REFLECTION: An object can look at itself listing and changing its properties and methods. So it means that a JavaScript object have the ability to look at its own properties and methods. We can use this feature of the JavaScript language to implement a very userful pattern called EXTEND.
*/


/* This is a generic person object that have 'firstname' and 'lastname' peropertiest setted on a 'Default' value. This generic person object provide also a getFullName() method that return the concatenation of the firstname and the lastname
*/
var person = {
    firstname: 'Default',
    lastname: 'Default',
    getFullName: function() {
        return this.firstname + ' ' + this.lastname;  
    }
}

/* This john object represent a specific person but do not provide the getFullName() method: */
var john = {
    firstname: 'John',
    lastname: 'Doe'
}

// don't do this EVER! for demo purposes only !!! 
/* This set the 'person' object on the proto variable of the john object. So from this john object I can also use the getFullName() method defined for the generic person object: */
john.__proto__ = person;


// Now, we are going to see an example of the use of reflection in JavaScript:


for (var prop in john) {            // Iterate on all the properties into the john object (prop is the current property during the iteration)
    if (john.hasOwnProperty(prop)) {
        // propo is the current property name and john[prop] is the related value of this property into the john object:
        console.log(prop + ': ' + john[prop]);      
    }
}

The code is pretty neat and the comment explain what it does.

So I have a generic person object that provide the getFullName() method and I have also the john object that represent a specific person but that have not dfined the getFullName() method.

Then I do:

john.__proto__ = person;

that say that the person object is the prototype of the john object so it means that the john object inherite from the person object. So I will expect that now the john object have access alsto at the getFullName() method.

Then I use reflection to iterate on the john object and I print all the properties of this objects.

I obtain this result:

firstname: John
lastname: Doe

This seems to me pretty strange because, as I can see also in the tutorial, I would expect to see also this property:

getFullName: function() {
    return this.firstname + ' ' + this.lastname;  
}

because now I have access to it.

Why I can't see it? What am I missing? What is the problem?

Answer 1

As one can see Juhana has already answered it in the comments but i would like to add my explanations.

When you do:

john.__proto__ = person;

I would say it connects two objects as Object john has prototype of person . So john has the access to all the properties available in the person object.

Still this does not adds the person object's properties to object john but they have a connection between them as per __proto__ . So, john still has its own props as is and it can access the method in the person object.

This condition:

if (john.hasOwnProperty(prop)) {

does not let it log properties of it's prototype.

hasOwnProperty limits the property access to the current object in the iteration.

Answer 2

First of all avoid using proto as its not same in all browsers. now proto add things to prototype ie making inheritance. Upon using john.hasOwnProperty(prop) will be true only for the own properties and not for inherited properties,thats why getFullName