Curriculum

JavaScript Basic

JSHome

0/216

JS Versions

0/36

JS Objects

0/15

JS Funtions

0/22

JS Classes

0/3

JS Async

0/10

JS HTML DOM

0/25

JS Browser BOM

0/17

JS Web APIs

0/7

JS AJAX

0/11

JS JSON

0/16

JS vs jQuery

0/4

JS Graphics

0/7

Text lesson

JS Object Constructor

Object Constructor Functions

Sometimes we need to create many objects of the same type.

To define an object type, we use a constructor function.

It’s considered good practice to start constructor function names with an uppercase letter.

Object Type Person

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Note:

In the constructor function, this has no value.

When a new object is created, this will refer to that new object.

Now we can use new Person() to create multiple Person objects:

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

A value assigned to a property will serve as the default for all objects instantiated by the constructor.

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 is simple to add a property to an object once it has been created.

Example

myFather.nationality = “English”;

Note:

The property will be added to myFather, but not to any other Person objects.

Adding a Property to a Constructor

You cannot add a new property to an object constructor.

Example

Person.nationality = “English”;

To add a new property, it must be added to the prototype of the constructor function.

Example

Person.prototpe.nationality = “English”;

Constructor Function Methods

A constructor function can also include 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

Adding a method to a created object is easy:

Example

myMother.changeName = function (name) {
this.lastName = name;
}

Note:

The method will be added to myFather but not to any other Person objects.

Adding a Method to a Constructor

You cannot add a new method directly to an object constructor function.

Executing this code will result in a TypeError.

Example

Person.changeName = function (name) {
this.lastName = name;
}

myMother.changeName(“Doe”);

TypeError: myMother.changeName is not a function

To add a new method, it should be done on the constructor function’s prototype.

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, replacing this with myMother.

Built-in JavaScript Constructors

JavaScript includes built-in constructors for all its native objects.

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 included in that list. Math is a global object, and the new keyword cannot be applied to Math.

Did You Know?

Prefer object literals {} over new Object().

Prefer array literals [] over new Array().

Prefer pattern literals /()/ over new RegExp().

Prefer function expressions () {} over new Function().

Example

“”;           // primitive string
0;            // primitive number
false;        // primitive boolean

{};           // object object
[];           // array object
/()/          // regexp object
function(){}; // function