Question

I have noticed that Google Chrome debugger behaves quite differently depending on how a JS object is created;

If I create an js object like this;

var SonA = function(thename) {
               this.firstname = thename || "Graham";
               this.age = 31;
}

SonA.prototype = new Father();

Then Chrome’s debugger doesn’t allow me to drill down and view the prototype. It does however give me key value pairs of the instance variables name and age.

However, if I omit the this keyword, I am able to drill down to the prototype, but I do not get the instance variables displayed in the debugger.

//SonB doesn't use this keyword    
var SonB = function(thename) {
                  firstname = thename || "Graham";
                  age = 31;
           } 

SonB.prototype = new Father();

console.log(new SonA()); //this logs as: SonA {firstname: "graham", age: 31}
console.log(new SonB()); //this logs as as drill down object that shows the prototype

Does anyone know what is going on here, and why the behavior of the debugger is different? The following image and jsfiddle may make the issue clearer to understand;

http://jsfiddle.net/7z8sp/1/

Answer 1

I don’t see what it is you’re trying to achieve. The only reason why you can “drill down” to the prototype in sonB, is because the constructor isn’t setting any properties, but it’s creating implied globals. Just add this line to your fiddle:

console.log(age);//<--logs 31

It logs the values that are being set by the sonB constructor. If you want to get at the prototype-properties, you either: delete the child’s property, or you use the Object.getPrototypeOf() method.

To clarify: this isn’t inherent to the debugger, but to the way JS gets the values and properties of an object. consider the following:

var emptyObject = {};
console.log(emptyObject.someProperty);//logs undefined
Object.prototype.someProperty = 'YaY';
console.log(emptyObject.someProperty);//logs YaY
emptyObject.someProperty = function()
{
    return Object.getPrototypeOf(this).someProperty;
};
console.log(typeof emptyObject.someProperty);//function
console.log(emptyObject.someProperty());//YaY again
delete(emptyObject.someProperty);//returns true
console.log(emptyObject.someProperty);//logs YaY.

What does this mean: simply put, if you attempt to access a property on any object (arrays, objects, functions, the lot) JS will first check if that particular instance has that property defined, if it doesn’t, then JS steps up a level in the prototype-chain. If that prototype doesn’t have the requested property, JS skips to the next prototype, and so on. If no property was found, undefined will be returned.
It therefore stands to reason that, if your constructor sets certain properties, JS won’t bother with the prototypes and return the properties ASAP.

The same logic applies to implied globals. If variables are missing the var keyword, JS scans the scopes (current function, “parent” function(s), and eventually the global scope) in search of that variable. If it is found, that variable will be either used or reassigned (depending on what you’re doing with it in your code). If no variable was found, then JS will kindly create one for you. Sadly, without bothering to return to the current scope. The result: a global variable is created.
In your code, the Father constructor, creates a new function object for each instance. This unction relies on a closure variable (sirname) and a global variable (firstname). The latter isn’t being set by SonA, because that constructor assigns a new property. SonB, however, does create the global variable that both SonA and SonB will share.

The only reason why the getName member function of Father is working on sonB, is because that method, too, relies on scope-scanning and an implied global:

new SonB();//<-- constructor sets age and firstname globals
SonB.getName();//<-- ~= Father.getName.apply(SonB,arguments);
     ||
     ---> gets firstname global that was set in SonB constructor, uses that value

That’s all there is too it, just redefine Father’s getName method to:

this.getName = function()
{//use this to point at calling context -> IE the instance on which the member function is being invoked
    return this.firstname + ' ' + surname;
};