Placeholder Image

Subtitles section Play video

  • - I've got one more topic here,

  • about object orientated programming in ES6 with classes,

  • and that is what is polymorphism?

  • And what does polymorphism mean,

  • and how is it applied in JavaScript?

  • So just a review, the core idea

  • of object orientated programming,

  • creating a blueprint, a template as a class,

  • that makes, that encapsulates

  • a whole bunch of data and functionality together,

  • that is the idea of encapsulation.

  • It's a little package of an object,

  • with data and functionality.

  • Inheritance is the idea of one side made a class,

  • and I want a class to inherit

  • a lot of properties or functions,

  • but modified with its own custom stuff.

  • That's the idea of inheritance,

  • and inheritance is a thing that happens in a tree,

  • because you can have something inherit something,

  • which inherits something else.

  • And actually, at the end of this video,

  • I'm going to do a little bonus,

  • and just show one little trick about inheritance

  • that might be kind of interesting.

  • Now, what is polymorphism?

  • So, polymorphism, if we look at the word itself,

  • poly, meaning many,

  • and morphism, morph for like form,

  • means we can treat an element,

  • an object that has a particular type,

  • like a Confetti object,

  • as either a Confetti object or a Particle object,

  • depending on what's convenient for us.

  • And yet, somehow, the system, the compiler,

  • the interpreter, the executor of the code,

  • is going to know what to do correctly.

  • And so, if I were in a strongly typed language,

  • which JavaScript is not.

  • By strongly typed, I mean you have to declare

  • the type of the thing before you make a variable.

  • - One moment, please!

  • So, during this video,

  • I refer to Java as a strongly typed language,

  • and all the places I looked on the internet,

  • do describe Java as a strongly typed language.

  • However, the aspect that I was explaining

  • is really something known as explicit typing,

  • meaning you have to,

  • if you're going to declare a variable, a variable p,

  • I have to say what kind of data I'm putting in there.

  • Is it an integer, is it a float, is it a particle?

  • What "strongly typed" means,

  • is that that type could never change.

  • It has to remain the same.

  • And there's really like a lot of stricter rules

  • around how that works.

  • So like Python, for example, is also strongly typed,

  • but you don't have to declare,

  • it's not explicit,

  • you don't have to say what kind of type that variable is.

  • You just can't change it later, you've got to be,

  • it's got to work all what is compiled.

  • So there's a lot of nuance to that,

  • and I'll try to include some reading material

  • in this video's description, to explain that better.

  • But what I really meant was explicit typing, okay?

  • Now, back to the video.

  • - Normally I would say, like

  • Confetti, c equals a new Confetti object.

  • This is the way, in a strongly typed language,

  • I would declare a variable, c,

  • I would give it a type, it's Confetti,

  • and I'd call the Confetti constructor to make that object.

  • In a strongly typed language,

  • I could also say, Particle p or Particle C,

  • or whatever it is,

  • equals new Confetti.

  • And this would be allowed,

  • because Confetti extends Particle.

  • So, in that case,

  • I could consider this variable to be of different forms.

  • I can consider it to be a Particle when it's convenient,

  • or a Confetti object when it's convenient.

  • But, the compiler will always know

  • to execute and use the properties and functions

  • of the Confetti class.

  • And this is especially convenient

  • when you want to put a lot of stuff into an array

  • in a strongly typed language,

  • because you don't want to keep track

  • of which types which things are.

  • We can basically do the same idea in JavaScript,

  • it will just look less fantastic,

  • because JavaScript is so flexible anyway about types.

  • But this is the core idea.

  • So, let's actually go and do this.

  • Over here, let's change --

  • this is code from my previous video about inheritance --

  • let's change this to an array.

  • And I'm going to make an array called Particle.

  • And I'm going to put a little for loop,

  • to just add 10 Particles in setup.

  • Then, just to get started,

  • I'm going to say Particles, index i is a new Particle,

  • and I'll just put them all in the center, whatever.

  • And then, now I can say for let p of particles.

  • And I can say, and this in a for of loop,

  • which lets me go through every particle,

  • I could use a for each loop,

  • I know a lot of people prefer those.

  • But, let p update and show.

  • So, now I should see, if I refresh this,

  • I should see, here we go,

  • I've got 10 particles moving around.

  • Now, what if what I wanted to do was say,

  • if random one is less than .5,

  • so I basically want to give a 50% chance

  • of either putting a Particle object or a Confetti object.

  • The magic of all of this

  • is that I don't have to change this code down here.

  • I just can fill this same array

  • with a bunch of different objects,

  • as long as they're kind of linked

  • through this idea of inheritance,

  • they all have an update function,

  • they all have a show function,

  • polymorphism says this variable, p,

  • is going to know for each one,

  • whether it's a Confetti or a Particle object,

  • and it's going to execute the right version of the function.

  • So we should now see,

  • we have a bunch Particles and a bunch of Confettis.

  • And every time I refresh this,

  • there's a different random amount.

  • So, that's polymorphism.

  • Wow, I made kind of a short video.

  • So, I promised a little extra tidbit

  • here at the end of this video.

  • So one of the things that's really interesting

  • about inheritance and that inheritance tree,

  • is that inheritance is not just the thing that's useful

  • because you designed your own Particle class,

  • and now you're designing your own Confetti class

  • that extends Particle.

  • Maybe somebody else designed something

  • and you want to inherit everything from that.

  • For example, there is a thing in p5 called p5.Vector.

  • I've used it in a lot of coding challenges and videos.

  • p5.Vector object is a vector object.

  • It has an x, a y, and a z component,

  • and has a lot of functionality for vector math.

  • So what I actually could do here,

  • is I could say, look at this,

  • I could say class Particle extends p5.Vector.

  • So in that case, now I'm just going to say, super x, y,

  • this is now an object that's going to get x and y

  • from the parent class.

  • But, I can now start to use other stuff.

  • So, for example, my Particle might also have a velocity,

  • which is, I want to make it random,

  • so I'm actually going to use the p5.Vector random 2D function,

  • so it can have a random velocity,

  • and then I can say, oh this is so crazy,

  • but this.add, this.velocity.

  • Because there's an add function

  • and I want to add the velocity to this object,

  • because it is a p5.Vector, ah!

  • And then I could just draw it at this, .x and .y.

  • Let's see if this works.

  • Amazingly, this works.

  • So, the behavior is very different,

  • because it's not a different random velocity,

  • it's just a random direction,

  • but you can see, this is very powerful.

  • Particle extended p5.Vector,

  • I suddenly got access to

  • all of the vector math that's in p5.Vector,

  • and then Confetti extends Particle,

  • so it's also a vector.

  • And let's just look, I think it would be useful

  • for me to, very briefly, before I go,

  • just go over to the console and do something like,

  • let a p equal a new Particle.

  • Just look at this, look at this.

  • Take a look at this.

  • You can see that this is now,

  • this Particle object has an x, y, and z,

  • and this is actually how it works underneath the hood.

  • You can see here that its prototype,

  • where it inherits everything from,

  • is from this particular object.

  • And if I looked at a Confetti object,

  • this has to do with the prototype stuff,

  • this is what ES6 classes completely hides from you,

  • and if I look at this object now,

  • we can see, look, it has the brightness in r,

  • it has this velocity, it has an x, y, z,

  • its prototype, what it inherits from,

  • is Particle, and that prototype is vector!

  • So you can actually see,

  • this is generally a place you kind of don't want to look,

  • 'cause it's like super confusing,

  • but you can see the inheritance chain, the prototype chain,

  • or the inheritance tree here.

  • Confetti extends Particle, which extends vector.

  • And this s.Vector is like a weird notation,

  • 'cause of the way the p5 library works.

  • Alright.

  • So that was a little extra trick.

  • You can think about that,

  • maybe that will confuse you, that's okay,

  • it kind of confused me while I was explaining it.

  • Hopefully you got a sense of inheritance and polymorphism

  • as features as aspects of object oriented programming

  • that you can apply in JavaScript using ES6 JavaScript.

  • Thanks very much, and I'll see you later.

  • (upbeat music)

- I've got one more topic here,

Subtitles and vocabulary

Operation of videos Adjust the video here to display the subtitles

B1 confetti particle object vector inheritance p5

16.18: Polymorphism in JavaScript - Topics of JavaScript/ES6

  • 0 0
    林宜悉 posted on 2020/03/27
Video vocabulary