CODEWITHSUNDEEP
javascriptprototypeconsole.log
BeNdErR
BeNdErR

Reputation: 17927

console.log a javascript Object/Class - same result before and after the change of the prototype

I'm trying to understand how js prototypes and classes work, and I'm using Chrome's console.log to print and have a look at the state of my objects while I add new properties etc.

This is the code I'm using: (fiddle)

function Person(){}

Person.prototype.sayHello = function(){ alert("Hello"); };
Person.prototype.name = "Name";

console.log(Person.prototype) //1st console.log

Person.prototype.surname = "Surname";

console.log(Person.prototype); //2nd console.log

I expect to have two different results printed in the console, because the surname property was added after the first console log. Instead, this is the console output:

enter image description here

As you can see, both the outputs have the surname property defined even if it was added only after the 1st console.log..

Can you explain me why? What am I missing? Doesn't console.log show the current state of the object when called?

Thank you in advance, best regards

Upvotes: 3

Views: 11650

Answers (1)

john Smith
john Smith

Reputation: 17906

your next line of code where you set the persons surname, doesnt wait for the console log because console.log is asynchrounous, when you try out this code with a timeout it will be correct, 

 function Person() {}

 Person.prototype.sayHello = function () {
     alert("Hello");
 };
 Person.prototype.name = "Name";

 console.log(Person.prototype) //1st console.log
 setTimeout(function(){
  Person.prototype.surname = "Surname";

 console.log(Person.prototype); //2nd console.log
 },1000);

you could save a copy of that object before you log it, then it would work

Synchronous console logging in Chrome

UPDATE: i have an even better solution :
just log a stringifyed version of the object and you´ll be okay 

console.log(JSON.stringify(Person.prototype))

Upvotes: 3

Related Questions