to talk to you about something called inheritance.

Inheritance in the context of object oriented programming

and JavaScript and ES6 classes.

Oof!

So, first of all,

there are three core foundational principles

to object oriented programming.

Let me write those down!

There's this idea of encapsulation,

there is this idea of inheritance,

that is the topic of this particular video,

and there is also the concept of polymorphism

which I will come back to.

And I have made videos on all of these topics before.

I can link to them.

Those videos, however,

were all made in the processing programming environment

and looking at these three principles

in the Java programming language.

Now I am talking about exactly the same thing

but in JavaScript.

And I have already made a whole set of videos about

encapsulation and object orineted programming in JavaScript

making use of something called ES6 classes.

So one of the things you have to get used to

if you choose to spend you life programming in JavaScript

is that it's just always changing

and there's 500 different ways to do the same thing

and everybody's got their opinion on which way is best.

And a lot of my older videos used a prototype

a prototypical object based way

of doing object oriented programming

with a constructor function

and you'll find those in older coding challenges

and you'll even find a set of videos about

how to do object oriented programming that way

and even one about how to do inheritance that way.

And if you watch that you're a true champion

because this is wildly confusing

and I have no idea if I explain that well.

But I am here in this video

to talk about ES6 classes.

So what is a class?

Oh, sorry, ES6 being the version of JavaScript

that came out in 2015.

It is currently 2019 while I'm recording this.

But it is now pretty widely supported across all browsers.

So, the idea of a class,

and I'm going to use as my example

something called particle,

because I am demonstrating this in the context

of animation and graphics.

So I'm drawing particles in a canvas

those particles move around the canvas

and the class is a template

for the making of an object.

If I create a particle class,

then I can have a variable somewhere else,

maybe I call it p,

and I can say new particle.

An analogy that's often used to describe

the distinction between the class and the object

is the cookie cutter versus the cookie.

So the cookie cutter isn't actually a cookie.

It's a thing that you can make cookies with.

So this is a template, there's no particle object here.

This is just a template to make actual particle objects.

And if I have my template

I can make more than one particle object

each with its own set of properites

all made from the same template.

So the new key word here,

saying new particle means execute something inside the class

called a constructor function.

So I'm kind of I guess by accident reviewing

some of the basics of ES6 classes

and object oriented programming

to get myself into the inheritance topic.

But I'm going to kind of move along

because you can find and see many more

details and examples about this in the other videos.

So this is the basic idea.

So let's go over to the code for a second.

So what I have over here is a canvas

with a little dot moving around.

And this dot is an example of a particle object.

So here's my class.

I have the constructor,

the object gets an x and a y

and the update function changes the x and y randomly

and the show function draws it as a boint.

A boint?

(laughs)

It would be great if there was a function called boint,

by the way.

Anyway.

So let's say now,

let's say this is your life,

this is what's happening to you.

You know what I would like?

I would like to put another one of these particles

I wanted to,

but I want it to look different.

And so I want it to be a square particle.

So the first thing you might do is like, okay,

I'm going to make a Boolean variable like isSquare

and I'm going to set that to a square,

I'm going to add another argument here square.

And then I'm going to say

alright, if this dot is square,

then draw this as a,

not a square a function,

then just use rectangle,

this dot x this dot y,

when will this ever end?

At least I could use the square function,

it's the least I could do.

Could say square,

otherwise make it a point,

and then, ugh, I'm so tired already.

I need a parenthesis here

and then I have to go over here,

and I could change this to like true

because I want it to be a square,

and then I refresh and look, it's a square,

and then I could say false and it's not.

So now I could have two particles,

oh, I could have p1 and p2

and I could have p1 do this

and p2 do this,

oh, I'm so tired.

This is so much work and so much coding.

And I'm going to call update and show on both of those.

And there we go.

Now I have my circle and my square.

Alright, so that's one solution to this.

I have two different mostly the same things

with some sort of core essential difference.

I don't like this solution.

Let me do it another way.

I'm going to make another,

I'm going to just create a new JavaScript file.

I'm going to call it square.js.

I'm going to go here,

I'm going to copy paste the whole thing

paste that in here,

I'm going to get rid of this idea of isSquare,

and I'm going to have a class called SquareP

for square particle.

I'm going to get rid of this variable.

And then I'm going to,

this one's the square so I'm going to draw it as a square.

And then this one is the circle

so I'm going to draw this just as a plain old point.

And I don't need this anymore,

and I don't need this.

So I have basically a particle class

and I have a square class, SquareP class,

they're entirely the same

but one draws as a square

and one draws as a particle.

Now I'm going to go back to Sketch.js

and I'm going to say new SquareP

and I'm going to refresh,

and if I did everything right,

no, SquareP is not defined

because I forgot to reference it

in my index.html so let me do that.

Then I'm going to go back

and there we go!

(bell dings)

Good night!

This video is now over,

but not at all!

In fact, I'm only just getting started.

All of this was exposition.

Exposition to the point where we are right now,

where we think to ourselves,

there has got to be a better way.

There has got to be a better way

than having some kind of type variable inside of my class

and then I use if statements,

or to have two separate classes

which I've just copy pasted the code

and changed some things.

How could I have this idea of classes

that inherit a bunch of properties from another class,

but modify them.

And this is in fact what inheritance is for.

So let's now think about that

in the context of this.

What if I could write another class

and I'm going to call that class SquareP,

which is like the silliest name for a class ever,

but it's somehow my example for this video.

This is what happens when you record a tutorial

after three hours of recording tutorials.

Class SquareP, ugh!

But I missed the most important piece of this.

You had to wait through so much video

just to get to this point

where now I am going to say extends,

and this is the most important thing,

particle.

This is the keyword.

Extends is a keyword in JavaScript.

In ES6 that makes the square particle class,

the SquareP class,

inherit from particle.

So let's think about what this is.

Now the constructor is a special case.

The constructor is a special case

where we're going to have to work with it in a different way.

But, if what this means

is if there is an update function,

update function,

and if there is a show function,

that it's as if I copy pasted

the update and the show function into SquareP

but I don't actually have to.

These functions are now part of the SquareP class.

It extends from particle,

it inherits particle.

This is also sometimes referred to as the child class,

or maybe the subclass.

And this is often referred to as the super class

or the parent class.

And the word super is quite important here

because that's actually a keyword in JavaScript

that's going to allow us to do some interesting things later.

In a moment.

Now while I could be done

by just inheriting update and show

and sort of assuming I'm also going to inherit the constructor,

it's a good habit,

and I think in almost all cases

you really need to explicitly write your own constructor

even if you are extending another class,

but in the case where all I want to do

is when I make a SquareP,

a square particle,

and actually in my Nature of Code book,

which this example is mostly the same,

I call this class confetti.

That's another name I could be using.

If I want to just say,

you know what?

I'm going to define my own constructor

but I want to do exactly the same thing

as whatever happens in here

and the way to do that

is just by calling the super function.

So the keyword super means

execute something from the parent or super class.

So super with parenthesis means run the constructor.

So let's now actually try to go over

and do this in the code.

So now what we can do

is we can say SquareP extends particle,

this is the magic.

Once I've extended particle,

I can just get rid of this.

That stuff is all inherited now from particle!

Woohoo!

And then I can just say hey, super, do the same thing.