4.13 Prototypes Part 2¶

.__proto__ VS .prototype¶

Task 1: Create a new date object, what is its prototype?

var date = new Date();

console.log(date.__proto__);

The result is: {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

Task 2: Refer to task 1; is date.__proto__ equal to Date.prototype?

var date = new Date();

console.log(date.__proto__ === Date.prototype);

The result is: true

Task 3: Create a new array object, what is its prototype?

var arr = new Array();

console.log(arr.__proto__);

The result is: [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

Task 4: Refer to task 3; is arr.__proto__ equal to Array.prototype?

var arr = new Array();

console.log(arr.__proto__ === Array.prototype);

The result is: true

Task 5: Create a new function object, what is its prototype?

var func = new Function();

console.log(func.__proto__);

The result is: ƒ () { [native code] }

Task 6: Refer to task 5; is func.__proto__ equal to Function.prototype?

var func = new Function();

console.log(func.__proto__ === Function.prototype);

The result is: true

Task 7: What is the prototype 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");

console.log(laptop1.__proto__);

The result is: {constructor: ƒ}

Task 8: Refer to task 7; is laptop1.__proto__ equal to Laptop.prototype?

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");

console.log(laptop1.__proto__ === Laptop.prototype);

The result is: true

Task 9: What is the prototype of book1 object?

function Book(weight, pages){
  this.weight = weight;
  this.pages = pages;
}

var book1 = new Book(0.2, 200);

console.log(book1.__proto__);

The result is: {constructor: ƒ}

Task 10: Refer to task 9; is book1.__proto__ equal to Book.prototype?

function Book(weight, pages){
  this.weight = weight;
  this.pages = pages;
}

var book1 = new Book(0.2, 200);

console.log(book1.__proto__ === Book.prototype);

The result is: true

Modifying Constructors 1¶

Task 11: Add fullName method to the user object below. The fullName value is firstName lastName.

var user = {
  firstName: "Ola",
  lastName: "Rasi"
}

user.fullName = function(){
  return (this.firstName + " " + this.lastName);
}

console.log(user.fullName())

The result is: Ola Rasi

Task 12: Create a constructor that creates user objects. Hint: use the user object below.

/*
var user = {
  firstName: null,
  lastName: null,
}
*/

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

var user1 = new User("Ola", "Rasi");

console.log(user1);

The result is: User {firstName: "Ola", lastName: "Rasi"}

Task 13: Refer to task 12; what is the prototype of User constructor? is User.prototype an object?

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

console.log(User.prototype);
console.log(typeof User.prototype);

The result is as follows:

{constructor: ƒ}
object

Task 14 Refer to task 13; User.prototype is an object, add the property groupId with a value 57 to it.

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

User.prototype.groupId = 57;

console.log(User.prototype);

The result is: {groupId: 57, constructor: ƒ}

Task 15 Refer to task 14; create user objects from User constructor.

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

User.prototype.groupId = 57;

var user1 = new User("Ola", "Rasi");
var user2 = new User("Ali", "Zaki");
var user3 = new User("Nawras", "Ali");

console.log(user1);
console.log(user2);
console.log(user3);

The result is as follows:

User {firstName: "Ola", lastName: "Rasi"}
User {firstName: "Ali", lastName: "Zaki"}
User {firstName: "Nawras", lastName: "Ali"}

Task 16 Refer to task 15; what is the groupId value of user1, user2, and user3 objects.

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

User.prototype.groupId = 57;

var user1 = new User("Ola", "Rasi");
var user2 = new User("Ali", "Zaki");
var user3 = new User("Nawras", "Ali");

console.log(user1.groupId);
console.log(user2.groupId);
console.log(user3.groupId);

The result is as follows:

57
57
57

Task 17: Add languageVerbose method to Epic constructor below. The value of this method is {name} was written in {language}.

function Epic(name, author, lang){
  this.name = name;
  this.author = author;
  this.language = lang;
}

Epic.prototype.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.languageVerbose());
console.log(".............................")
console.log(epic2.languageVerbose());

The result is as follows:

Mahabharata was written in Sanskrit.
.............................
Ramayana was written in Sanskrit.

Task 18: Add category property to Video constructor below. The value of this property is "Education".

function Video(title, lang){
  this.title = title;
  this.language = lang;
}

Video.prototype.category = "Education";

var video1 = new Video("Create a WordPress Theme", "Arabic");
var video2 = new Video("What is FSF?", "Arabic");
var video3 = new Video("Learn JavaScript in 15 Minutes", "Arabic");

console.log(video1, video1.category);
console.log(video2, video2.category);
console.log(video3, video3.category);

The result is as follows:

Video {title: "Create a WordPress Theme", language: "Arabic"} "Education"
Video {title: "What is FSF?", language: "Arabic"} "Education"
Video {title: "Learn JavaScript in 15Min", language: "Arabic"} "Education"

Task 19: Add brand property to markerPen constructor below. The value of this property is "Claro".

function MarkerPen(color, price){
  this.color = color;
  this.price = price;
}

MarkerPen.prototype.brand = "Claro";

var markerPen1 = new MarkerPen("red", "2USD");
var markerPen2 = new MarkerPen("Blue", "2.2USD");

console.log(markerPen1, markerPen1.brand);
console.log(markerPen2, markerPen2.brand);

The result is as follows:

MarkerPen {color: "red", price: "2USD"} "Claro"
MarkerPen {color: "Blue", price: "2.2USD"} "Claro"

Task 20: Add course property to Section constructor below. The value of this property is "JavaScript Course".

function Section(title, desc){
    this.title = title;
    this.description = desc;
}

Section.prototype.course = "JavaScript Course";

var section1 = new Section("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.");
var section2 = new Section("JavaScript Functions", "Introduction to JavaScript functions and closures.");
var section3 = new Section("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.");


console.log(section1);
console.log(section1.course);
console.log("................")
console.log(section2);
console.log(section2.course);
console.log("................")
console.log(section3);
console.log(section3.course);

The result is as follows:

Section {title: "JavaScript Basics", description: "Learn the basics of JavaScript in such a simple and easy way."}
JavaScript Course
................
Section {title: "JavaScript Functions", description: "Introduction to JavaScript functions and closures."}
JavaScript Course
................
Section {title: "JavaScript Arrays", description: "Learn about JavaScript arrays and array helpers."}
JavaScript Course