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)