Calling a function with new
creates a new object using the called function as
the "constructor" for that object:
function MyFunction() {}
const myObject = new MyFunction();
typeof myObject;
> "object"`
This lets a "constructor function" provide a template for the creation of objects that follow the same structural pattern:
function MyFunction() {
this.myProperty = true;
}
const myObject = new MyFunction();
myObject.myProperty;
> true
The value of this
within a constructor
function refers to the object being created, letting the object be populated
with properties and methods at the time of creation. This allows for the
creation of objects that contain data values and any methods needed to act on
that data as a single portable unit, a concept called "encapsulation":
function MyFunction( myArgument ) {
this.myValue = myArgument;
this.doubleMyValue = () => myArgument * 2;
}
const myObject = new MyFunction( 10 );
myObject.myValue;
> 10
myObject.doubleMyValue();
> 20
this
refers to the current execution
context of a function, meaning that a constructor function follows the same
rules for the value of this
as any other function. For example, a function
intended as a constructor uses global binding
for the value of this
when invoked independently:
function MyFunction() {
console.log( this );
}
const myObject = new MyFunction();
> MyFunction { }
MyFunction(); // Global `this` binding outside of strict mode is `globalThis`
> Window { … }
(function() {
"use strict";
function MyFunction() {
console.log( this );
}
MyFunction(); // Global `this` binding inside of strict mode is `undefined`
}());
> undefined
It's conventional to capitalize the first character of a constructor function's
identifier, following the naming pattern established by JavaScript's built-in
factory functions. Though you may sometimes see the terms used interchangeably,
constructor functions—functions intended to act on a newly-constructed
object when invoked with the new
keyword—differ from "factory
functions," which explicitly return
an
object when invoked normally:
function myFunction( myArgument = false ) {
return { "myProperty" : myArgument };
}
const myObject = myFunction( true );
myObject;
> Object { myProperty: true }
Though the underlying principles are the same, the use cases for custom constructor functions are better served by the more fully-featured Class syntax introduced in ES6.