Javascript object lost constructor when the prototype was changed

Question

In below code

var A = function() {};
var a = new A();
var b = new A();

A.prototype = {};

var c = new A();
console.log(a.constructor === b.constructor);
con         


        

Answer 1

When you construct an object, the constructor's prototype property is copied to the new object's __proto__, so while a and b retain the old prototype (which also contains the .constructor property), c uses the new blank prototype (which doesn't have constructor as own property). Here's a diagram:

After a = new A; b = new A:

After A.prototype = {}; c = new A()

As you can see, direct assignment to a prototype breaks the JS object system and may lead to surprising results (which your very question demonstrates). That's why it's generally frowned upon.

Answer 2

The problem is that when you use A.prototype={} it is changed the behavior of A object.

When you use A.prototype={}, A object lost it’s constructor.

Why it is this behavior ?

The constructor property is assigned to prototype function.

And in your case ,A.prototype is replaced with a new Object {}, which doesn't have constructor property as own property (but its prototype has and is equal to Object).

Lets see the following example:

function A() { } // (1)
A.prototype = {}  // (2)

Before (2)

Object.prototype
{
    constructor:Object
}

A.prototype
//was autocreated with A
{
    constructor:A
}

After (2)

Object.prototype
{
    constructor:Object
}

A.prototype
//reassigned with {}
{
   //no constructor
}

Answer 3

When using function as an object constructor, its prototype.constructor is automatically created with function's property. So initially after setting up the A function you will have a constructor in A's prototype:

A.prototype.constructor

So when you assign A.prototype ={}, you lost that original constructor in A.prototype.

You may fix it with adding this after A.prototype ={} line

A.prototype.constructor = A;

Both console should log true