Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Prototypes and Inheritance in JavaScript

Objectives

By the end of this lesson, students should be able to:

  • Demonstrate a use case that explains prototypal inheritance and what kind of flexibility it gives to programmers
  • Use namespaces to organize application code
  • Define a custom constructor method that sets one or more properties of a new object

Pre-requisites

Before this lesson, students should already have experience with:

  • Ruby and Ruby-based OOP
  • Javascript variables, functions, objects and callbacks but not prototypes and constructors

Sample Teach Lesson Plan


Step 1 (5 mins)

Introduction

Last year, I helped a friend prepare for his Christmas Bell workshop. He put together a complete set for me to follow as I packed the remaining 30 sets.

The 1st Christmas bell set that my friend put together is what we would call a prototype, which is what we are learning today.

You've learnt about Javascript objects in the previous lesson - objects have properties (I have something) and methods (I can do something).

Well, every Javascript object has/follow a prototype. The prototype is also an object, just like the prototype Christmas bell is a physical set like the rest and not just a drawing.

All Javascript objects inherit their properties and methods from their prototype. For the Christmas bells, if the prototype has a red ribbon, all of them will have red ribbons. If the prototype can light up, all of them can light up.

Explain Skill (I Do)

Let us implement a Christmas bell object in Javascript and give it these properties: name, ribbonColor. According to your previous lesson on objects, if we want 2 bells, the code would be:

// Create individual bells
var bell01 = {name:"Bell 01"};
var bell02 = {name:"Bell 02"};

// Let's add ribbons!
bell01.ribbonColor = "red";
bell02.ribbonColor = "red";

Imagine the above with 30 bells! What happens if we used prototypes?

// A constructor for bells - convenient!
function bell(name) {
    this.name = name;
}

// Create individual bells
var bell01 = new bell("Bell 01");
var bell02 = new bell("Bell 02");

// Let's add ribbons!
bell.prototype.ribbonColor = "red";

Hmm...since the bells inherit from the bell prototype, does the bell prototype inherit from anything?

console.log(bell01.toString()); // [object Object] - where did this method come from??

// Override the toString() method from Object prototype, using a callback
bell.prototype.toString = function () {
	return "I am a bell and my name is " + this.name + ".";
}

console.log(bell01.toString()); // I am a bell and my name is Bell 01.

Step 2 (5 mins)

Practice Skill Together (We Do)

There's more, but instead of me doing all the talking, it's your turn to think and exercise your fingers!

3 questions:

  1. What if we want all the bells to have a lightUp method, ie. bell01.lightUp()?
  2. The constructor now is a global function, which may easily be misused, eg. var cowBell = new bell("Cow Bell"). How do we fix that?
  3. Is there a way for us to set the ribbon color when creating the individual bells?

Type out your answers and test them! You can copy the code below to start off:

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

bell.prototype.ribbonColor = "red";
bell.prototype.toString = function () {
	return "I am a bell and my name is " + this.name + ".";
}

// Create individual bells
var bell01 = new bell("Bell 01");
var bell02 = new bell("Bell 02");

Step 3 (5 mins)

Assess, Debrief and Correct (Closing)

Qn 1: Implement lightUp method for all bells

// Add method to bell prototype which all bells will inherit
bell.prototype.lightUp = function () {
    console.log(this.name + " has lighted up!");
}

Qn 2: Fix easy misuse of current constructor

// Use namespace to organize application code
var ChristmasBell = function (name) {
    this.name = name;
}

// Create individual bells
var bell01 = new ChristmasBell("Bell 01");
var bell02 = new ChristmasBell("Bell 02");

Qn 3: Implement lightUp method for all bells

// Define a custom constructor method that sets one or more properties of a new object
var ChristmasBell = function (name, ribbonColor) {
    this.name = name;
    this.ribbonColor = ribbonColor || "red";
}

// Create individual bells
var bell01 = new ChristmasBell("Bell 01", "green");
var bell02 = new ChristmasBell("Bell 02");

Homework: What if I added the following line? Will the colors of the 2 bells change? Why?

ChristmasBell.prototype.ribbonColor = "yellow";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment