Question

Quick Note: Please don’t explain basics of javascript inheritance in your answer.

Here is simple constructor function with some properties attached to it’s prototype member.

function Foo() { 
    this.relationship = "Love"; 
};

Foo.prototype.name = "Natalie";
Foo.prototype.age = 22;
Foo.prototype.country = "France";

Now we create new object with Foo and test some basics. Everything is cool.

var girl = new Foo();

girl.hasOwnProperty("relationship"); //=> true
girl.hasOwnProperty("name");         //=> false

girl.relationship;  //=> "Love"
girl.name;          //=> "Natalie", this comes from Foo.prototype

girl.__proto__ === Foo.prototype;            //=> true
girl.__proto__.name === Foo.prototype.name;  //=> true
girl.name === Foo.prototype.name;            //=> true

And if we update the value of Foo.prototype.name property, girl.name points to new value as it should.

Foo.prototype.name = "Lucia";
girl.name;  //=> "Lucia", this comes from Foo.prototype

Mysterious thing happens when we change Foo.prototype and make it null, undefined, empty object etc.

Foo.prototype = null;

If our girl object had a hidden __ proto__ (ECMA [[Prototype]]) link to Foo.prototype, then after making Foo.prototype null there should be no chance for girl to get name property, but it does!

girl.name;     //=> "Lucia"
girl.age;      //=> 22
girl.country;  //=> "France"

Now if we create another object with Foo at this point. It doesn’t have name, age and country, because, of course, Foo.prototype is null.

var new_girl = new Foo();
new_girl.name;     //=> undefined
new_girl.age;      //=> undefined
new_girl.country;  //=> undefined

So my question is how on earth previous object (girl) and his hidden __ proto__ link can remember those properties after we assigned Foo.prototype to null?

Answer 1

It’s not mysterious at all, and it has nothing to do with inheritance.
It has to do with object-pointers/references.

var a = { name : "Bob", age : 32 };
var b = a;

b.name; // "Bob";
a.name = "Jim";
b.name; // "Jim";
a = null;
b.name; // "Jim";

What happened?

a and b were given pointers to the same object.
As you changed the properties of the object, by referencing one or the other (it doesn’t matter if you change them on a or on b), the other reference will see the changes, too.

You aren’t making new objects which have the same properties and values, you’re just giving them both the address of the same object, and they’re looking up the properties every time you ask them.

Then you reassign a.

You’re not changing the object, you’re giving a an address to some other place.
b still has the address.

So now think of it this way:

function Foo () { }
Foo.prototype = { name : "Bob", age : 32 };

var a = new Foo();
var b = new Foo();

a.__proto__ === Foo.prototype;
b.__proto__ === Foo.prototype;

Foo.prototype.age = 35;

a.age; // 35
b.age; // 35

// now we're replacing the `.prototype` reference with a brand new object
Foo.prototype = { name : "Sally", age : 16 };

a.__proto__ !== Foo.prototype;
b.__proto__ !== Foo.prototype;

a.name; // "Bob"
b.age;  // 35

All the constructor is doing in the background is saying:

this.constructor = arguments.callee;
this.__proto__   = this.constructor.prototype;

So when you change properties on the object referenced by both this.constructor.prototype and this.__proto__ lookups on either will find the new values.
But removing a reference from one won’t delete the object for the other.

If that’s the result you want, then you’d need to erase each property of the prototype (doesn’t matter where you do it from — from the function or from any of the instances) and then nullify the .prototype by setting it to an empty object (null would cause errors on lesser browsers), so future objects have no access.