[Javascript] Understanding the .constructor property on JavaScript Objects

Constructor functions hold an interesting purpose in JavaScript. Unlike in classical languages, they do not always mean created by. In this lesson we’ll use the new keyword to make a constructor call and work with the .constructor property.

 

When we define a function:

function Foo(){
    //.
}

It has one prototype prop defined which is constructor. And it points to the Foo function itself.

console.log(Foo.prototype.constructor === Foo) // true

 

And if we have an instance created by new keyword:

const f= new Foo();

Then:

console.log(f.constructor === Foo) // true

 

So which mean:

f.constructor === Foo.prototype.constructor

 

This prototype chain can be broken when we reassgin the Foo.prototype = {}:

Foo.prototype = {}; // now we reassign to an empty object.
console.log(Foo.prototype.constructor === Foo);  // false
console.log(f.constructor === Foo); //true
console.log(f.constructor === Foo.prototype.constructor); // false

 

We can use Object.defineProperty to reassign the constructor to the Foo.prototype:

Foo.prototype = {};
Object.defineProperty(Foo.prototype, "constructor", {
  enumerable: false,
  writable: true,
  configurable: true,
  value: Foo
});

console.log(Foo.prototype.constructor === Foo); // true
console.log(f.constructor === Foo); // true
console.log(f.constructor === Foo.prototype.constructor); // true