JS Object Constructors
Object Constructor Functions
Sometimes we need to create many objects of the same type.
To create an object type we use an object constructor function.
Using an uppercase first letter when naming constructor functions is regarded as best practice.
Object Type Person
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Note:
This is null in the constructor function.
When a new object is formed, this value will become the new object.
We can now generate several new Person instances by using new Person():
Example
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
const mySister = new Person("Anna", "Rally", 18, "green");
const mySelf = new Person("Johnny", "Rally", 22, "green");
Property Default Values
Any object made using the constructor will use the value assigned to a property as their default value:
Example
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Adding a Property to an Object
It’s simple to give an object you’ve built a property:
Example
myFather.nationality = "English";
Note:
The new property will be added to myFather. Not for any other Person Objects.
Adding a Property to a Constructor
An object constructor can NOT have any more properties added to it:
Example
Person.nationality = "English";
You have to add a new attribute to the prototype of the constructor function:
Example
Person.prototype.nationality = "English";
Constructor Function Methods
Additionally, a constructor function may contain methods:
Example
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.fullName = function() {
return this.firstName + " " + this.lastName;
};
}
Adding a Method to an Object
It’s simple to add a function to a generated object:
Example
myMother.changeName = function (name) {
this.lastName = name;
}
Note:
The new approach will be implemented in myMother. Not for any other Person Objects.
Adding a Method to a Constructor
You cannot include a new method in an object constructor function.
This code generates a TypeError:
Example
Person.changeName = function (name) {
this.lastName = name;
}
myMother.changeName("Doe");
TypeError: myMother.changeName is not a function
It is necessary to add a new method to the prototype constructor function:
Example
Person.prototype.changeName = function (name) {
this.lastName = name;
}
myMother.changeName("Doe");
Note:
The changeName() function assigns the value of name to the person’s lastName property, substituting this with myMother.
Built-in JavaScript Constructors
Constructors are pre-built for all native objects in JavaScript:
new Object() // A new Object object
new Array() // A new Array object
new Map() // A new Map object
new Set() // A new Set object
new Date() // A new Date object
new RegExp() // A new RegExp object
new Function() // A new Function object
Note:
The Math() object is not in the list. Math is a global object. The new keyword cannot be used on Math.
Did You Know?
Instead than using new Object(), use object literals {}.
New Array() should be replaced by array literals [].
Instead to using new RegExp(), use pattern literals /()/.
Instead than using new Function(), use function expressions () {}.
Example
""; // primitive string
0; // primitive number
false; // primitive boolean
{}; // object object
[]; // array object
/()/ // regexp object
function(){}; // function
