Exploring Prototype and Inheritance

Tutorial 3 of 5

1. Introduction

1.1 Brief explanation of the tutorial's goal

In this tutorial, we aim to explore and understand the concepts of prototypes and inheritance in JavaScript Object Oriented Programming (OOP).

1.2 What the user will learn

By the end of this tutorial, you will learn:

What prototypes are in JavaScript
How JavaScript uses prototypes for inheritance
Practical examples of prototypes and inheritance

1.3 Prerequisites

Basic understanding of JavaScript is required. Familiarity with Object Oriented Programming would be useful but not necessary.

2. Step-by-Step Guide

2.1 Prototypes in JavaScript

In JavaScript, every object has a prototype. The prototype is itself an object, and all objects inherit their properties and methods from their prototype.

let animal = {
  eats: true
};

let rabbit = Object.create(animal);

console.log(rabbit.eats); // true

In the above example, rabbit inherits the eats property from the animal object.

2.2 JavaScript Prototype Inheritance

In JavaScript, objects can inherit from other objects. This is known as prototype inheritance.

let animal = {
  eats: true,
  walk() {
    console.log("Animal walk");
  }
};

let rabbit = Object.create(animal);

rabbit.walk(); // Animal walk

In this example, rabbit inherits the walk method from the animal object.

3. Code Examples

Example 1

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype.eat = function() {
  console.log(this.name + ' eats.');
}

let rabbit1 = new Rabbit('White Rabbit');

rabbit1.eat(); // White Rabbit eats

In this example, we add a method eat to the prototype of Rabbit. All instances of Rabbit will have this method.

Example 2

function Animal(name) {
  this.name = name;
}

Animal.prototype.walk = function() {
  console.log(this.name + ' walks.');
}

function Rabbit(name) {
  this.name = name;
}

Rabbit.prototype = Object.create(Animal.prototype);

let rabbit1 = new Rabbit('Brown Rabbit');

rabbit1.walk(); // Brown Rabbit walks

In this example, Rabbit inherits from Animal by setting its prototype to an instance of Animal.

4. Summary

In this tutorial, we have covered:

The concept of prototypes in JavaScript
How JavaScript uses prototypes for inheritance
Examples demonstrating prototypes and inheritance

Next, you could explore more about JavaScript OOP, including classes and constructors. Here are some helpful resources:

5. Practice Exercises

Exercise 1

Create an object cat that inherits from animal and add a method meow to cat.

let animal = {
  eats: true
};

let cat = // Your code here

cat.meow(); // should log "Cat meows"

Exercise 2

Modify the Rabbit function to accept name and color properties. Make sure color is available to all instances and methods of Rabbit.

function Rabbit(name) {
  this.name = name;
}

// Your code here

let rabbit1 = new Rabbit('Grey Rabbit', 'grey');

console.log(rabbit1.color); // should log "grey"

Solutions

Solution for Exercise 1

let animal = {
  eats: true
};

let cat = Object.create(animal);

cat.meow = function() {
  console.log("Cat meows");
};

cat.meow(); // Cat meows

Solution for Exercise 2

function Rabbit(name, color) {
  this.name = name;
  this.color = color;
}

let rabbit1 = new Rabbit('Grey Rabbit', 'grey');

console.log(rabbit1.color); // grey

In the above solution, we added a color property to the Rabbit constructor function. Now, color is available to all instances and methods of Rabbit.