JS Reflexion: see what is inside the object

Sometimes, our code can get very complex because objects might extend the other objects. So it can get very tricky to debug the code. That’s why JS has useful feature called Reflection, which allows us to see what is inside the object.

var person = {
   firstname: 'Default',
   lastname: 'Default',
   getFullName: function() {
      return this.firstname + ' ' + this.lastname;
}
}

var john = {
   firstname: 'John',
   lastname: 'Doe'
}

// don't do this EVER! for demo purposes only!!!
john.__proto__ = person;

var person = {

firstname: 'Default',

lastname: 'Default',

getFullName: function() {

return this.firstname + ' ' + this.lastname;

}

var john = {

firstname: 'John',

lastname: 'Doe'

}

// don't do this EVER! for demo purposes only!!!

john.__proto__ = person;

The above code will sorta extend the john object with user object. If you run the code below

for (var prop in john) {
   console.log(prop + ': ' + john[prop]);
}

for (var prop in john) {

console.log(prop + ': ' + john[prop]);

}

So, what happens is, JS compiler will go through the Prototype chain, by finding firstname and lastname from John object, then getFullName() from it’s parent object which is Person. Basically, prototype chaining is feature of JS that automatically will search for the Objects fields and methods, if it cannot find it, JS will ascend to it’s parent. Js will continue searching for Objects fields and methods all the way till the Object. All primitives, funcitons and objects in JS are extended from the Object object.

Output:

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

firstname: John

lastname: Doe

getFullName: function () {

return this.firstname + ' ' + this.lastname;

}

Below code, shows only the content of the john object

for (var prop in john) {
   if (john.hasOwnProperty(prop)) {
      console.log(prop + ': ' + john[prop]);
   }
}

for (var prop in john) {

if (john.hasOwnProperty(prop)) {

console.log(prop + ': ' + john[prop]);

}

Output:

firstname: John
lastname: Doe

1 2	firstname: John lastname: Doe

Leave a Reply Cancel reply