JS: 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 JS: 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 let 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 JS: What's Object?])
  2. The function FF is used with new, as in const 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
console.log (Object.getPrototypeOf(jj).hasOwnProperty("constructor")); // true

[see JS: Operator “new”]

What's the Property "constructor" For?

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

What's the 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 const jj = new FF();.

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

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

Do Not Use the Constructor Property

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

  1. The value of the property key "constructor" can be set to any object.
  2. User can add or remove a property key "constructor" to any object.
  3. The parent object of a object can change anytime. (by calling Object.setPrototypeOf ( obj, parent )) [see JS: Object.setPrototypeOf]
  4. JavaScript objects are typically created without a constructor. A object can be created by literal expression such as {{…}, […], /…/}, or by Object.create(). [see JS: Create Object]

[see JS: What's Constructor?]

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

// 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
console.log ( xx.constructor === Object ); // true

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 ( Object.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 JS: 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 ( Object.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 JS: 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 ( Object.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 JS: Function Object]

Showing a object's constructor:

// showing a literal object's constructor
const oo = {};
console.log ( oo.hasOwnProperty("constructor") ); // false
console.log ( Object.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 JS: 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 ( Object.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 JS: 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 JS: Data Types]

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

[see JS: “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 JS: Find Object's Prototype]

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

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

Reference

ECMAScript 2015 §ECMAScript Language: Functions and Classes#sec-function-definitions-runtime-semantics-evaluation

ECMAScript 2015 §Ordinary and Exotic Objects Behaviours#sec-makeconstructor

JS Constructor Topic

  1. JS: “this” Binding
  2. JS: What's Constructor?
  3. JS: Property Key "prototype"
  4. JS: Operator “new”
  5. JS: “instanceof” Operator
  6. JS: Property Key "constructor"
Liket it? Put $1 at patreon.

Or, Buy JavaScript in Depth