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);
console.log(a.constructor === c.constructor);
output is true and false.
I am interested in the false output. a and c were created using same constructor function which is A - why is their constructor property different? It seems I miss something.
PS. If I remove the line where I am changing prototype of A output is: true true.
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.
constructor property, it belongs to a prototype.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
}
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
a.constructorandc.constructor. This may be relevant stackoverflow.com/questions/11234664/what-does-native-code-mean