General Assembly

Prototypal Inheritance

Wilson Espina

Review

What did we do last lesson?

Prototypal Inheritance

Learning Objective

Learning Objectives

At the end of this class, you will be able to:

  • Use a constructor function to produce objects of a particular type.
  • Attach attributes to a new object using the constructor.
  • Define methods on custom objects by attaching them to the prototype.
  • Work with prototypes using class keyword syntax.

Prototypal Inheritance

Agenda

  • Homework Review
  • Constructor Functions
  • Prototypes
  • Prototype Property
  • Prototype Chain
  • Classes

Prototypal Inheritance

Classroom Resources

  • Pull changes from the wilson-espina/jsd-9-resources repo to your computer
  • In your editor, open the following folder: Documents/JSD/jsd-9-resources/14-prototypal-inheritance

Prototypal Inheritance

Homework Review

Prototypal Inheritance

Prototypal Inheritance

Prototypal Inheritance

Constructor Functions

Code along

Code Along

Open up: 00-objects-codealong

Code Along

Prototypal Inheritance

Repetitive code


const batman = {
  name: 'Bruce Wayne',
  alias: 'The Bat-man',
  usePower: function () {
    return 'Spend money and hit people'
  }
}

const spiderman = {
  name: 'Peter Parker',
  alias: 'Spidey',
  usePower: function () {
    return 'Hang on walls and shoot webs'
  }
}
  • Bug prone
  • Not 'DRY'
  • Slow

Exercise - Create a makecar function

Exercise

Type of Exercise

  • Individual / pair

Location

  • starter-code > 01-make-car-exercise

Timing

8 mins
  1. In app.js, define a function called makeCar() that takes two parameters (model, colour), makes a new object literal for a car using those params, and returns that object.

Prototypal Inheritance

Class vs Prototype

class vs prototype

Code along

Code Along

Open up: 02-constructor-codealong

Code Along

Prototypal Inheritance

Constructors


function Hero(name, alias, power, usePower) {
  this.name = name
  this.alias = alias
  this.power = power
  this.usePower = usePower
}
  • DRY
  • Maintainable
  • More Efficient

Exercise - Car Constructor

Exercise

Type of Exercise

  • Individual

Location

  • starter-code > 03-constructor-exercise

Timing

5 mins
  1. In app.js, Write a constructor function to replace our makeCar function from 01-make-car-exercise.

Prototypal Inheritance

Prototypes

Prototypal Inheritance

Base Prototype

  • Nearly all objects in JavaScript are instances of a base prototype Object which sits on the top of an inheritance chain.
  • The base Object allows all objects to access properties such as toString and constructor.
Base Prototype object

Prototypal Inheritance

Proto Object

  • Every object in JS has a __proto__ property, which is the object that is used in the lookup chain to resolve methods, etc. 

const newObj = {};
newObj.__proto__
// proto object
Prototype object

Prototypal Inheritance

Prototypes

  • All JavaScript objects have a prototype property, which is a reference to another object.
  • Any properties/methods defined on an object’s prototype are available on the object itself, without defining those properties/methods a second time.
  • Typically, common properties shared between instances of objects are set on the prototype.
  • The relationship between objects that have a prototypal relationship with each other is known as the prototype chain.

Prototypal Inheritance

USING THE prototype PROPERTY


function Cat(name, breed) {
  this.name = name;
  this.breed = breed;
}

Cat.prototype.species = "Felis Catus";
Cat.prototype.meow = function() {
  return `Meow! I’m ${this.name}`;
}
							

// Cat.prototype object

{
  species: "Felis Catus",
  meow: function() {
    return `Meow! I’m ${this.name}`;
  }
}

Prototypal Inheritance

USING THE prototype PROPERTY

let felix = new Cat("Felix", "Bengal Cat");


{
  // Individual properties created by constructor function
  name: "Felix",
  breed: "Bengal Cat",

  // Inherited from Cat.protoype object
  species: "Felis Catus",
  meow: function() {
    return `Meow! I’m ${this.name}`;
}

Code along

Code Along

Open up: 04-prototypes-codealong

Code Along

Exercise - Monkey Constructor

Exercise

Type of Exercise

  • Individual / pairs

Location

  • starter-code > 06-prototypes-exercise

Timing

8 mins
  1. In app.js, create a Monkey constructor that meets the specs described.
  2. Create 3 objects using your Monkey constructor and verify that all properties and methods of each have the expected values.

Prototypal Inheritance

Prototype Chain

Prototype chain

Code along

Code Along

Open up: 07-prototypal-inheritance-codealong

Code Along

Exercise - Build a Prototype Chain

Exercise

Type of Exercise

  • Individual / pair

Location

  • starter-code > 08-prototypes-lab

Timing

10 mins
  1. Create an Item constructor using the specs in the start file.
  2. Create Clothing and Household constructors and use Item as the prototype for each.
  3. Test your work in the browser console.
  4. BONUS: If you finish early, work on the bonus items described in app.js.

Prototypal Inheritance

Prototype Terminology

  • Prototype: a model used to create instances.
  • Prototype chain: Every object in Javascript has a prototype, including the prototype Object. This “chain” links until it reaches an object that has no prototype, usually the Object’s prototype.
  • prototype property: a reference to another object that is often an instance of the constructor object.
  • __proto__ (or “dunder proto”): a property used by web browsers that indicates an object’s parent in the prototype chain.

Prototypal Inheritance

Classes

Prototypal Inheritance

Class vs Prototype

class vs prototype

Prototypal Inheritance

Class Keyword


function Vehicle(color) {
  this.color = color;
}

Constructor

=


class Vehicle {
  constructor(color) {
    this.color = color;
  }
}

Class Keyword (ES6)

Prototypal Inheritance

Extends and Super Keyword


function Car(color) {
  this.color = color;
}

Car.prototype = new Vehicle();

Constructor + Prototype

=


class Car extends Vehicle() {
  constructor(color) {
    super(color);
  }
}

Class + Extends & Super Keywords (ES6)

Code along

Code Along

Open up: 09-classes-codealong

Code Along

Lab - Refactor Code to Use Classes

Exercise

Type of Exercise

  • Individual / pair

Location

  • starter-code > 10-classes-lab

Timing

Until 20:45
  1. Refactor the Item, Clothing, and Household prototypes and constructors to recreate the same prototype chain using class keyword syntax.
  2. Test your work in the browser console.

Prototypal Inheritance

Learning Objective

Learning Objectives

  • Use a constructor function to produce objects of a particular type.
  • Attach attributes to a new object using the constructor.
  • Define methods on custom objects by attaching them to the prototype.
  • Work with prototypes using class keyword syntax.

Prototypal Inheritance

Look Ahead to Next Lesson

  • Understand and explain Javascript context.
  • Understand and explain closures.
  • Instantly invoke functions.
  • Predict what the this keyword refers to in different situations.

Prototypal Inheritance

Lesson 18 choice

  • React Framework
  • Advanced JavaScript and Design Patterns
React logo JS logo

Prototypal Inheritance

Exit Ticket

(Lesson #14)