Placeholder Image

字幕表 動画を再生する

  • - I am here in this video

  • 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