Object Constructors

JS Tutorial

JS Version

JS Objects

JS Function

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web API

JS AJAX

JS JSON

JS vs JQUERY

JS Graphics

Object Constructors

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}

// Create a Person object

const myFather = new Person(“John”, “Doe”, 50, “blue”);

// Display age

document.getElementById(“demo”).innerHTML =

“My father is ” + myFather.age + “.”;

</script>

</body>

</html>

Output

JavaScript Object Constructors

My father is 50.

Object Types (Blueprints) (Classes)

The examples from the previous chapters are limited. They only create single objects

Sometimes we need a “blueprint” for creating many objects of the same “type”.

The way to create an “object type”, is to use an object constructor function.

In the example above, function Person() is an object constructor function.

Objects of the same type are created by calling the constructor function with the new keyword:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}

// Create two Person objects

const myFather = new Person(“John”, “Doe”, 50, “blue”);

const myMother = new Person(“Sally”, “Rally”, 48, “green”);

// Display age

document.getElementById(“demo”).innerHTML =

“My father is ” + myFather.age + “. My mother is ” + myMother.age + “.”;

</script>

</body>

</html>

Output

JavaScript Object Constructors

My father is 50. My mother is 48.

What is this?

In JavaScript, the this keyword refers to an object

Which object depends on how this is being invoked (used or called).

The this keyword refers to different objects depending on how it is used:

In an object method, this refers to the object.

Alone, this refers to the global object.

In a function, this refers to the global object.

In a function, in strict mode, this is undefined.

In an event, this refers to the element that received the event.

Methods like call(), apply(), and bind() can refer this to any object.

Adding a Property to an Object

Adding a new property to an existing object is easy:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}

// Create 2 Person objects

const myFather = new Person(“John”, “Doe”, 50, “blue”);

const myMother = new Person(“Sally”, “Rally”, 48, “green”);

// Add nationality to first object

myFather.nationality = “English”;

// Display nationality

document.getElementById(“demo”).innerHTML =

“My father is ” + myFather.nationality;

</script>

</body>

</html>

Output

JavaScript Object Constructors

My father is English

Adding a Method to an Object

Adding a new method to an existing object is easy:

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}

// Create 2 Person objects

const myFather = new Person(“John”, “Doe”, 50, “blue”);

const myMother = new Person(“Sally”, “Rally”, 48, “green”);

// Add a name method to first object

myFather.name = function() {

  return this.firstName + ” ” + this.lastName;

};

// Display full name

document.getElementById(“demo”).innerHTML =

“My father is ” + myFather.name();

</script>

</body>

</html>

Output

JavaScript Object Constructors

My father is John Doe

The method will be added to myFather. Not to myMother. (Not to any other person objects).

Adding a Property to a Constructor

You cannot add a new property to an object constructor the same way you add a new property to an existing object:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}

// You can NOT add a new property to a constructor function

Person.nationality = “English”;

// Create 2 Person objects

const myFather = new Person(“John”, “Doe”, 50, “blue”);

const myMother = new Person(“Sally”, “Rally”, 48, “green”);

// Display nationality

document.getElementById(“demo”).innerHTML =

“The nationality of my father is ” + myFather.nationality;

</script>

</body>

</html>

Output

JavaScript Object Constructors

You cannot add a new property to a constructor function.

The nationality of my father is undefined

Adding a Property to a Constructor

You cannot add a new property to an object constructor the same way you add a new property to an existing object:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

}

// You can NOT add a new property to a constructor function

Person.nationality = “English”;

// Create 2 Person objects

const myFather = new Person(“John”, “Doe”, 50, “blue”);

const myMother = new Person(“Sally”, “Rally”, 48, “green”);

// Display nationality

document.getElementById(“demo”).innerHTML =

“The nationality of my father is ” + myFather.nationality;

</script>

</body>

</html>

Output

JavaScript Object Constructors

You cannot add a new property to a constructor function.

The nationality of my father is undefined

To add a new property to a constructor, you must add it to the constructor function:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

  this.nationality = “English”;

}

// Create 2 Person objects

const myFather = new Person(“John”, “Doe”, 50, “blue”);

const myMother = new Person(“Sally”, “Rally”, 48, “green”);

// Display nationality

document.getElementById(“demo”).innerHTML =

“My father is ” + myFather.nationality + “. My mother is ” + myMother.nationality;

</script>

</body>

</html>

Output

JavaScript Object Constructors

My father is English. My mother is English

Adding a Method to a Constructor

Your constructor function can also define methods:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(first, last, age, eye) {

  this.firstName = first;

  this.lastName = last;

  this.age = age;

  this.eyeColor = eye;

  this.name = function() {

    return this.firstName + ” ” + this.lastName

  };

}

// Create a Person object

const myFather = new Person(“John”, “Doe”, 50, “blue”);

// Display full name

document.getElementById(“demo”).innerHTML =

“My father is ” + myFather.name();

</script>

</body>

</html>

Output

JavaScript Object Constructors

My father is John Doe

You cannot add a new method to an object constructor the same way you add a new method to an existing object.

Adding methods to an object constructor must be done inside the constructor function:

Example

function Person(firstName, lastName, age, eyeColor) {

  this.firstName = firstName;

  this.lastName = lastName;

  this.age = age;

  this.eyeColor = eyeColor;

  this.changeName = function (name) {

    this.lastName = name;

  };

}

The changeName() function assigns the value of name to the person’s lastName property.

Now You Can Try

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

// Constructor function for Person objects

function Person(firstName,lastName,age,eyeColor) {

  this.firstName = firstName;

  this.lastName = lastName;

  this.age = age;

  this.eyeColor = eyeColor;

  this.changeName = function (name) {

    this.lastName = name;

  }

}

// Create a Person object

const myMother = new Person(“Sally”,”Rally”,48,”green”);

// Change last name

myMother.changeName(“Doe”);

// Display last name

document.getElementById(“demo”).innerHTML =

“My mother’s last name is ” + myMother.lastName;

</script>

</body>

</html>

Output

JavaScript Object Constructors

My mother's last name is Doe

Built-in JavaScript Constructors

JavaScript has built-in constructors for native objects:

Example

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript Object Constructors</h2>

<p id=”demo”></p>

<script>

const x1 = new String();   // A new String object

const x2 = new Number();   // A new Number object

const x3 = new Boolean();  // A new Boolean object

const x4 = new Object();   // A new Object object

const x5 = new Array();    // A new Array object

const x6 = new RegExp();   // A new RegExp object

const x7 = new Function(); // A new Function object

const x8 = new Date();     // A new Date object

// Display the type of all objects

document.getElementById(“demo”).innerHTML =

“x1: ” + typeof x1 + “<br>” +

“x2: ” + typeof x2 + “<br>” +

“x3: ” + typeof x3 + “<br>” +

“x4: ” + typeof x4 + “<br>” +

“x5: ” + typeof x5 + “<br>” +

“x6: ” + typeof x6 + “<br>” +

“x7: ” + typeof x7 + “<br>” +

“x8: ” + typeof x8 + “<br>”;

</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>

</html>

Output

JavaScript Object Constructors

There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()

Use literals instead like: myArray = []

String Objects

Normally, strings are created as primitives: firstName = “John”

But strings can also be created as objects using the new keyword:

firstName = new String(“John”)

Learn why strings should not be created as object in the chapter JS Strings.

Number Objects

Normally, numbers are created as primitives: x = 30

But numbers can also be created as objects using the new keyword:

x = new Number(30)

Learn why numbers should not be created as object in the chapter JS Numbers.

Boolean Objects

Normally, booleans are created as primitives: x = false

But booleans can also be created as objects using the new keyword:

x = new Boolean(false)