4.12 Prototypes Part 1¶

Warm-up¶

Task 1: Create a constructor that creates phone instances. Use the user phone below.

/*
var phone = {
  os: null,
  ram: null,
  storage: null
};
*/

function Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

var phone1 = new Phone("Android", "2GB", "36GB");

console.log(phone1);

The result is: Phone {os: "Android", ram: "2GB", storage: "36GB"}

Task 2: Refer to task 1; what the type of Phone?

function Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

var phone1 = new Phone("Android", "2GB", "36GB");

console.log(typeof Phone);

The result is: function

Task 3: Refer to task 1; is Phone an instance of Object?

function Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

var phone1 = new Phone("Android", "2GB", "36GB");

console.log(Phone instanceof Object);

The result is: true

Task 4: Refer to task 1; what is the prototype of Phone?

function Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

var phone1 = new Phone("Android", "2GB", "36GB");

console.log(Phone.prototype);

The result is: {constructor: ƒ}

Task 5: Refer to task 4; what is the type of Phone prototype?

function Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

var phone1 = new Phone("Android", "2GB", "36GB");

console.log(typeof Phone.prototype);

The result is: object

Task 6: Refer to task 4; Phone.prototype is an object, can you access its constructor property?

function Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

var phone1 = new Phone("Android", "2GB", "36GB");

console.log(Phone.prototype.constructor);

The result is as follows:

ƒ Phone(os, ram, stg){
  this.os = os;
  this.ram = ram;
  this.storage = stg;
}

Set Prototype¶

Task 7: What is the prototype of the Set constructor?

console.log(Set.prototype);

The result is: Set {constructor: ƒ, has: ƒ, add: ƒ, delete: ƒ, clear: ƒ, …}

Task 8: Refer to task 7; what is the type of Set prototype?

console.log(typeof Set.prototype);

The result is: object ‍‍‍

Task 9: Refer to task 7; Set.prototype has add method. Log its value in the console.

console.log(Set.prototype.add);

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

Task 10: Create a new Set instance using the Set constructor.

var set1 = new Set();

console.log(set1);

The result is: Set(0) {}

Task 11: Use add method to add 5 to task 10 set1. Hint: use set1.add(5).

var set1 = new Set();

set1.add(5);

console.log(set1);

The result is: Set(1) {5}

Task 12: Refer to task 11; add 8 to set1.

var set1 = new Set();

set1.add(5);
set1.add(8);

console.log(set1);

The result is: Set(2) {5, 8}

Task 13: Refer to task 12; add 5 to set1.

var set1 = new Set();

set1.add(5);
set1.add(8);
set1.add(5);

console.log(set1);

The result is: Set(2) {5, 8}

Task 14: Refer to task 7; Set.prototype has delete method. Log its value in the console.

console.log(Set.prototype.delete);

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

Task 15: Use the delete method to remove 8 from task 13 set1. Hint: use set1.delete(8).

var set1 = new Set();

set1.add(5);
set1.add(8);
set1.add(5);
set1.delete(8)

console.log(set1);

The result is: Set(1) {5}

Task 16: Refer to task 7; Set.prototype has clear method. Log its value in the console.

console.log(Set.prototype.clear);

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

Task 17: Use clear method to remove all elements from task 15 set1. Hint: use set1.clear().

var set1 = new Set();

set1.add(5);
set1.add(8);
set1.add(5);
set1.delete(8)
set1.clear()

console.log(set1);

The result is: Set(0) {}

Prototype Chain¶

Task 18: Set is a built-in constructor, its prototype is an object. What is the type of Set? Is Set an instance of Object constructor?

console.log(`The type of Set constructor: ${typeof Set}`);
console.log(`Is Set constructor an instance of Object constructor: ${Set instanceof Object}`);

The result is as follows:

The type of Set constructor: function
Is Set constructor an instance of Object constructor: true

Task 19: What is the type of Set.prototype? is Set.prototype an instance of Object constructor?

console.log(`The type of Set.prototype: ${typeof Set.prototype}`);
console.log(`Is Set.prototype an instance of Object constructor: ${Set.prototype instanceof Object}`);

The result is as follows:

The type of Set.prototype: object
Is Set.prototype an instance of Object constructor: true

Task 20: Set.prototype is an object; hence, it inherits the properties and methods of Object constructor. The Object constructor inherits the properties and the methods of its prototype. What is Object.prototype?

console.log(Object.prototype);

The result is: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}

Task 21: Set.prototype is an object. We cannot access its prototype by using prototype property because prototype property is used on constructors. Instead, you can use obj.__proto__ to access the prototype of an instance. What is the prototype of Set.prototype?

console.log(Set.prototype.__proto__);

The result is: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}

Task 22: Refer to task 20 and task 21; is Set.prototype.__proto__ equal to Object.prototype?

console.log(Set.prototype.__proto__ === Object.prototype);

The result is: true

Task 23: What is the type of Object.prototype?

console.log(typeof Object.prototype);

The result is: object

Task 24: Object.prototype is an object; what is its prototype?

console.log(Object.prototype.__proto__);

The result is: null