JavaScript: Property Key “constructor”

By Xah Lee. Date: . Last updated: .

Where Does the Constructor Property Came From?

By spec, every function has a property key "prototype".

[see Property Key "prototype"]

For user-defined function f, the value of f.prototype by default is {"constructor":f} (that is, a object with one property key "constructor", with value of the function itself).

// every function has a property key "prototype" (except arrow fuction)

function FF() {}

console.log(
  FF.hasOwnProperty("prototype"),
); // true

// its value is a object, with just 1 property
console.log(
  Object.getOwnPropertyNames(FF.prototype).length === 1,
); // true

// the property key is "constructor"
console.log(
  FF.prototype.hasOwnProperty("constructor"),
); // true

// value of the property key "constructor" is the function
console.log(
  FF.prototype.constructor === FF,
); // true

When you create a object using new as in jj = new FF(), the newly created object jj does not have a property key "constructor", but inherits from its parent, which is FF.prototype.

Let's be more precise:

  1. Let there be a function FF, whose return value is not a object. (that is, no return statement, or returns a non-object. [see Object Type])
  2. The function FF is used with new, as in jj = new FF() to create a object.
  3. The parent of jj, has a property key "constructor".
function FF(){};
const jj = new FF();
console.log( jj.hasOwnProperty("constructor") === false); // true
console.log( Reflect.getPrototypeOf(jj).hasOwnProperty("constructor")); // true

[see Operator “new”]

Purpose

The constructor property is meant to let you find the creator function of a object. (but is not reliable.)

Here's a typical way constructor property is used.

// typical use of constructor property

function FF () { };
const myObj = new FF();
console.log( myObj.constructor === FF ); // true

Value of the Property Key "constructor"

It can be anything user sets.

Let's say you have user-created object named jj. You want to know what's the value of jj.constructor.

Normally, jj itself does not have a property key "constructor". But jj's parent object usually does.

jj's parent object, let's call it pp, may have a proprety named “constructor”, and its value, by default, is a function FF that created jj by jj = new FF();.

function FF(){};
const jj = new FF();
const pp = Reflect.getPrototypeOf(jj);

console.log( jj.hasOwnProperty("constructor") === false); // true
console.log( pp.hasOwnProperty("constructor")); // true
console.log( pp.constructor === FF); // true

Do Not Use the Constructor Property

There's no reliable way to find a object's creator function. Because:

[see What's Constructor?]

Here's a example. Setting a parent will offset the constructor value.

// the value of the property key "constructor" is not guaranteed to be the constructor

const pp = {};

function FF() {}
FF.prototype = pp;
const xx = new FF();

console.log( xx.constructor === FF ); // false

Standard Object's Constructor

For JavaScript's standard objects, using the constructor property is reliable (but is not very useful other than understanding how it works)

Showing a array object's constructor:

// showing array's constructor
const aa = [];

console.log( aa.hasOwnProperty("constructor") ); // false
console.log( Reflect.getPrototypeOf(aa) === Array.prototype ); // true
console.log( Array.prototype.hasOwnProperty("constructor") ); // true
console.log( Array.prototype.constructor === Array ); // true
console.log( Array.prototype.constructor === aa.constructor ); // true

[see Array Object]

Showing a date object's constructor:

// showing a date object's constructor
const dd = new Date();
console.log( dd.hasOwnProperty("constructor") ); // false
console.log( Reflect.getPrototypeOf(dd) === Date.prototype ); // true
console.log( Date.prototype.hasOwnProperty("constructor") ); // true
console.log( Date.prototype.constructor === Date ); // true
console.log( Date.prototype.constructor === dd.constructor); // true

[see Date Object]

Showing a function object's constructor:

// showing a function object's constructor
const ff = function () {};
console.log( ff.hasOwnProperty("constructor") ); // false
console.log( Reflect.getPrototypeOf(ff) === Function.prototype ); // true
console.log( Function.prototype.hasOwnProperty("constructor") ); // true
console.log( Function.prototype.constructor === Function ); // true
console.log( Function.prototype.constructor === ff.constructor); // true

[see Function Object]

Showing a object's constructor:

// showing a literal object's constructor
const oo = {};
console.log( oo.hasOwnProperty("constructor") ); // false
console.log( Reflect.getPrototypeOf(oo) === Object.prototype ); // true
console.log( Object.prototype.hasOwnProperty("constructor") ); // true
console.log( Object.prototype.constructor === Object ); // true
console.log( Object.prototype.constructor === oo.constructor ); // true

[see Object Object]

Showing a RegExp object's constructor:

// showing a RegExp object's constructor
const rr = /x/;
console.log( rr.hasOwnProperty("constructor") ); // false
console.log( Reflect.getPrototypeOf(rr) === RegExp.prototype ); // true
console.log( RegExp.prototype.hasOwnProperty("constructor") ); // true
console.log( RegExp.prototype.constructor === RegExp ); // true
console.log( RegExp.prototype.constructor === rr.constructor); // true

[see RegExp Object]

What's the difference between typeof, instanceof, constructor property?

typeof return the type of the object, but array, object, date, regex, etc all just return "object".

[see “typeof” Operator]

instanceof checks if a object is in the prototype chain of a function's property "prototype"'s value.

[see “instanceof” Operator]

Property key "constructor" is meant to return the function that created the object.

You shoud avoid using these, because none of these are reliable.

Instead, check directly what you are looking for, by:

Check for parent object. [see Get/Set Prototype]

Check for the exact “subtype” of a object. [see Determine Type of Object]

Check for the exact property, own or inherited. [see Check Property Existence]

JavaScript Constructor/Class

JS in Depth
XAH  BUY NOW

JS in Depth

JS Obj Ref

DOM


JS in Depth

Basic Syntax

Value Types

Variable

String

Function

Property

Object and Inheritance

Array

Constructor/Class

Iterable 🌟

Misc