4.11 Custom Constructors¶
Create Constructors¶
Task 1: Represent a laptop object in JavaScript. This laptop has an Intel i5 processor, 2GB RAM and 0.5TB storage.
var laptop = {
processor: "i5",
ram: "2GB",
storage: "0.5TB"
};
Task 2: Create a constructor that creates laptop instances of different specifications. Hint: use the laptop properties in task 1.
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(laptop1);
console.log(laptop2);
console.log(laptop3);
The result is as follows:
Laptop {processor: "i5", ram: "2GB", storage: "0.5TB"}
Laptop {processor: "i3", ram: "2GB", storage: "1TB"}
Laptop {processor: "i7", ram: "8GB", storage: "2TB"}
Constructor Naming Convention
It is a good practice to name constructors with the first letter capitalized.
Task 3: Create a constructor that creates user instances. Use the user object below.
/*
var user = {
firstName: null,
lastName: null,
username: null,
email: null,
fullName: function(){
return this.firstName + " " + this.lastName;
}
}
*/
function User(fstName, lstName, usrname, email){
this.firstName = fstName;
this.lastName = lstName;
this.username = usrname;
this.email = email;
this.fullName = function(){
return this.firstName + " " + this.lastName;
};
}
var user1 = new User("Ali", "Zaki", "AliZaki88", "alizaki@mail.com");
console.log(user1);
console.log(user1.fullName());
The result is as follows:
User {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com", fullName: ƒ}
Ali Zaki
Task 4: Create a constructor that creates epic instances. Use the epic object below.
/*
var epic = {
name: null,
author: null,
language: null,
languageVerbose: function(){
return `${this.name} was written in ${this.language}.`
}
}
*/
function Epic(name, author, lang){
this.name = name;
this.author = author;
this.language = lang;
this.languageVerbose = function(){
return `${this.name} was written in ${this.language}.`
}
}
var epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
var epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");
console.log(epic1);
console.log(epic1.languageVerbose());
console.log(".............................")
console.log(epic2);
console.log(epic2.languageVerbose());
This result is as follows:
Epic {name: "Mahabharata", author: "Vyasa", language: "Sanskrit", languageVerbose: ƒ}
Mahabharata was written in Sanskrit.
.............................
Epic {name: "Ramayana", author: "Valmiki", language: "Sanskrit", languageVerbose: ƒ}
Ramayana was written in Sanskrit.
Task 5: Create a constructor that creates video instances. Use the video object below.
/*
var video = {
length: null,
host: null,
category: null,
title: null,
language: null
};
*/
function Video(title, len, h, lang, cat){
this.title = title;
this.length = len;
this.host = h;
this.language = lang;
this.category = cat;
}
var video1 = new Video("Create a WordPress Theme", "30min", "Nawras Ali", "Arabic", "Education");
console.log(video1);
The result is: Video {title: "Create a WordPress Theme", length: "30min", host: "Nawras Ali", language: "Arabic", category: "Education"}
Task 6: Create a constructor that creates language instances. Use the language object below.
/*
var programmingLanguage = {
name: null,
os: null,
filenameExtension: null
stableRelease: null,
stableReleaseVerbose: function(){
return `The stable release of ${this.name} is ${this.stableRelease}.`;
}
}
*/
function Language(name, os, ext, stableRel){
this.name = name;
this.os = os;
this.extension = ext;
this.stableRelease = stableRel;
this.stableReleaseVerbose = function(){
return `The stable release of ${this.name} is ${this.stableRelease}.`;
}
}
var lang1 = new Language("Python", "Linux, macOS, and Windows", "py", "3.8.3");
var lang2 = new Language("PHP", "Unix-like, Windows", "php", "7.4.10");
console.log(lang1);
console.log(lang1.stableReleaseVerbose());
console.log(".......................")
console.log(lang2);
console.log(lang2.stableReleaseVerbose());
The result is as follows:
Language {name: "Python", os: "Linux, macOS, and Windows", extension: "py", stableRelease: "3.8.3", stableReleaseVerbose: ƒ}
The stable release of Python is 3.8.3.
.......................
Language {name: "PHP", os: "Unix-like, Windows", extension: "php", stableRelease: "7.4.10", stableReleaseVerbose: ƒ}
The stable release of PHP is 7.4.10.
Task 7: Create a constructor that creates book instances. Use the book object below.
/*
var book = {
weight: null,
pages: null
};
*/
function Book(weight, pages){
this.weight = weight;
this.pages = pages;
}
var book1 = new Book(0.2, 200);
console.log(book1);
The result is: Book {weight: 0.2, pages: 200}
Prototype¶
Task 8: Refer to task 2; What is the constructor of laptop1
object?
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(laptop1.constructor);
The result is as follows:
ƒ Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
Task 9: Refer to task 2; is laptop1
an instance of Laptop
constructor?
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(laptop1 instanceof Laptop);
The result is: true
Task 10: Refer to task 2; is laptop1
an instance of Object
constructor?
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(laptop1 instanceof Object);
The result is: true
Task 11: Refer to task 2; is Laptop
constructor itself an instance of Object
constructor?
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(Laptop instanceof Object);
The result is: true
Functions are objects
We have learned before that functions are objects in JavaScript. A constructor itself is a function. Hence, a constructor is an instance of Object constructor.
Task 12: Use a dictionary of your choice, and find the meaning of the word prototype
.
A prototype is a first or preliminary version of a device or vehicle from which other forms are developed.
Task 13: Refer to task 2; What is the prototype of Laptop
constructor? Hint: use Laptop.prototype
.
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(Laptop.prototype);
The result is: {constructor: ƒ}
Task 14: Refer to task 2; What is the type of Laptop
prototype ? Hint: use typeof Laptop.prototype
.
function Laptop(proc, ram, stg){
this.processor = proc;
this.ram = ram;
this.storage = stg;
}
var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");
console.log(typeof Laptop.prototype);
The result is: object
Prototype
A prototype is an object from which other objects can inherit properties and methods.
You can access the prototype of a constructor using constructorName.prototype
.
Task 15: What is the prototype of Date
constructor?
console.log(Date.prototype);
The result is: {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}
Task 16: Refer to task 15; what is the type of Date prototype?
console.log(typeof Date.prototype);
The result is: object
Task 17: What is the prototype of the Array
constructor?
console.log(Array.prototype);
The result is: [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]
Task 18: Refer to task 17; what is the type of Array prototype?
console.log(typeof Array.prototype);
The result is: object
Task 19: What is the prototype of the Object
constructor?
console.log(Object.prototype);
The result is: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}
Task 20: Refer to task 19; what is the type of Object prototype?
console.log(typeof Object.prototype);
The result is: object