16.17: Inheritance in JavaScript - Topics of JavaScript/ES6

Подписаться 1,7 млн

Просмотров 79 тыс.

50% 1

In this video, I discuss the concept of inheritance in Object-Oriented Programming (OOP) with JavaScript and using ES6 classes. Code: thecodingtrain.com/tracks/top...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
Videos:
🚂 Introduction to Inheritance: • 4.5: Introduction to I...
🚂 Introduction to Polymorphism: • 4.7: Introduction to P...
🚂 Classes in JavaScript: • 6.2: Classes in JavaSc...
Timestamps:
0:00 Inheritance in JavaScript
0:18 Core principles of object oriented programming
0:36 Other videos about these topics
1:41 What is an ES6 class?
3:25 The code I've already written
4:03 Using a variable for types of particles
5:31 Let's copy and paste to make two classes!
6:53 There has got to be a better way. What is that?
7:30 How to make a class that inherits from another class
10:13 Let's make a child class!
11:18 Augmenting and Overriding
12:24 Let's do some augmenting and overriding!
13:30 What if we want to do the same thing as the parent class but more?
14:37 A couple things to note
15:15 What is an inheritance tree?
16:46 What's next?
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: thecodingtrain.com/discord
✪ Nebula: go.nebula.tv/codingtrain
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#inheritance #oop #javascript

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 141

@seancpp 5 лет назад

Love the video! Just one thing: Make sure to clarify that the ES6 classes are still using the same prototypal inheritance as normal JS, and shouldn't be confused with the way inheritance works in languages like C++ and Java. (only the syntax is similar) The prototype chain and the quirks of the "this" context are all still present. The syntax for classes in ES6 hides this fact and can cause a lot of confusing errors. Hope this makes sense.

@TheCodingTrain 5 лет назад

Yes, this is a very good point!

@toastyPredicament 2 года назад

I put the thing back on

@toastyPredicament 2 года назад

How did I get weird money

@toastyPredicament 2 года назад

The superset

@toastyPredicament 2 года назад

OMG

@PuzaExplores 5 лет назад

I have always dreamed of a teacher like you 😍.

@kathy9124 4 года назад

Me too! 🤗

@aymenfyi 2 года назад

me too

@williamhorn411 2 года назад

I love how straight-to-the-boint this video is!

@CodingAdventures Год назад

Oldies but goldies. This is a nice video with a good explanation!

@WaseemYusuf 5 лет назад

Honestly, these videos are so wholesome, I never thought the day would come where I'm gonna watch OOP explanation videos on RU-vid just to brighten up my day, but here we are.

@samplower5860 4 года назад

wholesome like your mom.

@danielluna7648 3 года назад

Great video! I like how this series dives into the theory and what's happening under the hood and why more than your typical videos. I'm not the type of person who can just say "because that's how it works", I have to know WHY. So thank you.

@oksanaserhiivna2634 5 лет назад

I wish all videos about JS were the same expressive and enthralling as yours. :) Many thanks for your work!

@Patrick-iy1rb 4 года назад

You are my new favorite teacher. I hope you'll decide to start teaching full JavaScript courses and sell them at Udemy or something.

@aparnaiyer5873 3 года назад

How wonderful! Your energy is infectious, thanks sir!

@mattmmilli8287 5 лет назад

Your dedication to educating about JS is impressive. I hope this channel pays of for you in the end even if that is not the goal.

@lukasluftlaufer1093 4 года назад

Oh Daniel, you helped me once again so much! Thank you for these videos!!! You really are the best.

@mshahzebraza 2 года назад

Wow! It's real fun to see your code. You're so immersed in what you're doing brother. Keep it up!

@kabirrsinghsahni7792 4 года назад

He has the all-new ways to learn code, cheers!

@d_v_d1070 5 лет назад

happy to see concepts as such explained.

@mxc_clips 4 года назад

Your videos are the best. I am smiling while learning and watching a js tutorial. I always hope that someday I could take my skills and become a teacher to the next generation of programmers and I strive to be as good a teacher as you!

@Jbortoletto 5 лет назад

Hi Mr. teacher! Your classes are awesome, no matter if subjects are simple or complex. Thank you for sharing and inspiring!

@PiyushKumar-qj8ue 5 лет назад

Expert, always motivating me.

@vishank7 4 года назад

It feels sooo good to understand something like this! Thank you sir!

@iamamirali3424 3 года назад

I couldn't understand how to use Super correctly to inherit the mother class until I found your video. Thanks for this paranormal energy!

@ShaneLeeCoding 5 лет назад

When I was learning Java, Interitance was something that took me a while to get my head around. I wish I had this video when I was learning this. You've made this way more clear than anyone else. Thanks Daniel.

@kingykronous2284 5 лет назад

I've recently discovered your channel and I love it!

@ashwinramaswamy4059 3 года назад

For those using the Processing desktop editor - you might sometimes get a weird console error saying the superclass name is not defined when you try to extend it. I think this is because the editor rewrites index.html to always execute your .js files in alphabetical order of their filenames. So if you make a file 'B.js' and another 'A.js' where class A extends class B, you'll get a console error saying 'B is undefined', because it executes the subclass first. My solution is to just rename your subclasses to something beginning with a different alphabet, but it's a weird editor bug I think.

@RSkyCar 5 лет назад

Thank you Daniel! It was really useful stream, I learned a lot, so it's all makes sense now, how to write less code and organize a project. Hope you continue with Polymorphism in the next video.

@codybui6252 Год назад

Wonderful lesson. Thank you very much.

@charlesngerem3198 2 года назад

You're simply a blessing

@dhaval1489 5 лет назад

I am python guy and not don't understand JS for now, but I saw your video on Git and become a fan, I will do some basics of JS and come back

@7Chikchan 5 лет назад

Really appreciate your videos! Learned a lot from you

@pinkleprechaun52 2 года назад

The most adorable teacher on youtube

@FernandoPonteFilho 5 лет назад

It's awesome to have english subtitles, thanks.

@hi-techlogics3831 3 года назад

You are a universal treasure.

@halimchu9346 4 года назад

super duper helpful! Thank you!

@johnjohnson4484 4 года назад

your tuts are the gold standard here on yt

@hailahong3021 5 лет назад

Man. That’s what I need

@reimarpb 5 лет назад

Awesome! Btw I do like it when you start explaining classes and everything, even though I already know that and I'm here to learn about inheritance, but it does make it easier to understand

@juliofslt 3 года назад

I think I already found my fav coding channel on YT, you make the learning process really enjoyable! :)

@hoxas 3 года назад

Best teacher ever, lol burst out laughing at boint.

@osamasy5802 4 года назад

You are really the best @😊

@lavdixit2267 3 года назад

you explained it very well

@tntdogs6910 4 года назад

Nice video, helped me. I'm doing web-components now in my comp sci class

@nicchunglow 3 года назад

You are really good at teaching!

@kingundfaker 4 года назад

Inheritance starts at 7:20

@imajt5 4 года назад

Wow, you are awesome. Really great explanation.

@russellge2372 4 года назад

Thank u so much, sir!

@carlkitstie Год назад

You are just amazing

@pierrem2983 5 лет назад

I finally realized that you have to be a good programmer to code in JavaScript

@bestformspielt 5 лет назад

Your hand drawn curly braces are outrageous! ;)

@hussainsalih9736 5 лет назад

Thank you

@slyer7695 5 лет назад

Love from Italy!!!! ❤️❤️❤️❤️ 🇮🇹 #LoveFromItaly8

@misdi_official 5 лет назад

love it

@rdmammad5721 4 года назад

Perfect tutor ever😂

@shaimaa3424 4 года назад

U made me love Coding 😍😍😍😂😂

@palinejs 5 лет назад

Great!

@limitless1692 4 года назад

Thanks

@xomayaaxo 4 года назад

dude you're awesome

@marnix2452 5 лет назад

It would be cool if you make an implementation of the strategy design pattern. It follows the design principle "favour composition over inheritence"

@bluestonecreeper720 5 лет назад

Hi coding train. Take a look at the came screeps. Good vid

@paraschavan014 5 лет назад

Wooo I am learning inheritance (Java) In my college

@ellpell6550 Год назад

Nice thanks

@sydneyhill655 2 года назад

Thanks!

@TheCodingTrain 2 года назад

Thank you for the support!!

@AhmadAlmutiry 5 лет назад

Thank you, May you explain what difference between abstraction and encapsulation?

@frankkj1995 3 года назад

Boint! Ha that made me chuckle :)

@luismolinatanco1330 3 года назад

I am 49 yrs old. I grew as a programmer with c++. Since 2007 or so I use Processing and Arduino in my teaching. I love your videos and from watching them I’m wondering if I should be teaching p5.js instead of Processing. My students are Fine Arts students. I would love to have a conversation with you about this!

@aleksd286 5 лет назад

As a JS developer I can say that composition is preferred over inheritance. Please do a video about it, people will love it 😀

@TheCodingTrain 5 лет назад

Can you link to some good resources so I can read up on and research?

@aleksd286 5 лет назад

@@TheCodingTrain I think this article explains it well. medium.com/humans-create-software/composition-over-inheritance-cb6f88070205

@liamrobertson2670 5 лет назад

You should go over getters and setters. Factory functions would be great too

@TheCodingTrain 5 лет назад

Oh good idea! Please suggest here! github.com/CodingTrain/Rainbow-Topics/issues

@horseoperamarker 3 года назад

yes

@zacharymcarthur9013 4 года назад

I’m curious you said that a class can only inherit one other class, do you mean for example I couldn’t say “class Bat extends mammal, bird” to for example get the mammal class and as well pull flight from the bird class? I hope that makes sense. Thank you.

@lubomiratanasov6714 5 лет назад

Hi, I would like to know, what is the difference between Class-Inheritance and Object-inheritance. Thank you.

@Thanveershah 5 лет назад

I challenge you to create an animated colorful smoke , You are amazing btw

@jeranto24 5 лет назад

SENSEIIII!!

@grainfrizz 5 лет назад

C# does object oriented the best way possible (in my own opinion). Abstract, interface, struct...these are all super intuitive. But I understand that JS is interpreted lang and is not strongly typed. That's why it so short-handed.

@forktrader7870 5 лет назад

hello kababayan. 😂 JS is a gift and curse. they have simple class object capacity but it helps other professonals to create something that doesnt need to dig deeper the behind object-oriented programming and shoot their feet with diamond object problem etc. and no need VS download/setup on their system. anyways, thats your opinion. keep it up kababayan. ✌️

@josephgaribaldi4340 4 года назад

I'm one of the people that's beeen watching you from the future. So had the opportunity to notice your hair styles evolution .... from happy relaxed to happy "businessman" style. So is this latest style just temp?

@grahamhelton5395 5 лет назад

So to create the Tree, you would for example (in place of Particle class) have Animal class and then the (in place of Confetti class) have 'class Mammal extends Animal'? To do the tree would the next just be for example 'class Four legs extends Mammal' or 'class Four legs extends Animal'? Does the new class become the new super class?

@TheCodingTrain 5 лет назад

You can do either! But "class FourLegs extends Mammal" would by definition also extend Animal, but not the other way around!

@forktrader7870 5 лет назад

do you really need different classes to work with? and is it really bad to have conditionals within the class? example I have BigDataGrid class, do I really need to create separate DataGrid for each report? it seems highly maintainable in the future but highly quite alot to type with. anyway, thanks for the idea.

@toxin0343 5 лет назад

could you use the super keyword for the show function for example show(){ super.show() fill(this.bright) square(this.x, this.y, this.r) } or would it cause errors or would it just draw it as a circle . edit: I will be trying this myself and will comment what happens but wanted to comment in-case I forget

@TheCodingTrain 5 лет назад

Yes, you can do this! In the case above it'll draw both the circle and the square.

@toxin0343 5 лет назад

@@TheCodingTrain and would they be at the same x and y position? Would the square be on top because it runs after the particle? Thanks for the quick response

@TheCodingTrain 5 лет назад

@@toxin0343 Indeed they would be at the same x,y b/c each object only has that one x,y! It's the same as if you had called circle() directly in show().

@toxin0343 5 лет назад

Thanks for the quick reply love the channel

@mrlectus 5 лет назад

i wish i could type fast like you do

@idontwantmynameinhere 5 лет назад

Are you going to make videos on polymorphism and encapsulation? And if you already did, where can I find those videos?

@TheCodingTrain 5 лет назад

Here's a video about the basic idea of OOP (encapsulation) - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T-HGdc8L-7w.html - and the polymorphism video will come out later today or this weekend.

@bestformspielt 5 лет назад

composition over inheritance! just saying. :)

@adamnejm 5 лет назад

If you need a nice example here you go. Change classes using SPACE, hold Mouse1 to draw: let interval = 0, id = 0, objects = [], classes = []; function setup() { createCanvas(500, 500); //frameRate(60); } function draw() { background(255); objects.forEach(p => { p.update(); p.render(); }); if(mouseIsPressed) if(!(++interval % 5)) objects.unshift(new classes[id%3](mouseX, mouseY, 20)); } function keyPressed() { if(keyCode == 32) id++; } class Particle { constructor(x, y, r) { this.x = x; this.y = y; this.r = r; } update() { this.x += random(-2, 2); this.y += random(-2, 2); } render() { ellipse(this.x, this.y, this.r); } } classes[0] = class Square extends Particle { constructor(x, y, r) { super(x, y, r); this.t = millis(); } render(){ let s = sin((millis() - this.t)/100)*10 rect(this.x, this.y, this.r + s, this.r + s); } } classes[1] = class Circle extends Particle { update() { super.update(); this.r = sin(millis()/500) * 10 } render(){ ellipse(this.x, this.y, this.r); } } classes[2] = class Line extends Particle { update(){ this.x += 1; } render(){ line(this.x, this.y, this.x + this.r, this.y); } }

@hussainsalih9736 5 лет назад

I want ask you how to read text file in javascript???

@user-wu2dk6jv6y 5 лет назад

use fs

@alexblue8524 4 года назад

I wanted the code from this video. does someone knows how can I get that ?

@eduardwille1711 4 года назад

Copy it by looking at what they typed ;)

@kikawet 5 лет назад

What IDE are you using?

@TheCodingTrain 5 лет назад

VSCode, more here: ru-vid.com/group/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

@tomgibbons2230 5 лет назад

Is Nodes implementation of JS different? This doesn't work for me - the super(x,y) is not a valid keyword. Regardless, great video. You're the man! :-)

@MrAfusensi 4 года назад

@OptimusPrimeagar 4 года назад

Can you have more than one inheritance? For instance class Confetti extends particle extends circle ?

@kingundfaker 4 года назад

He says this at the end. The answer: no , but you can have a child class of a child class.

@maheshkotal4214 5 лет назад

Hello sir, can you add index. Html page, I need to see the code

@TheCodingTrain 5 лет назад

This workflow video series might help! where I go over all the pieces. ru-vid.com/group/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

@jochenpanjaer980 5 лет назад

Where is the video about encapsulation in ES6?

@TheCodingTrain 5 лет назад

I think I cover it in this one? ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-T-HGdc8L-7w.html

@poornamith 5 лет назад

VS Code

@toastyPredicament 2 года назад

Pls be ok

@tntdogs6910 4 года назад

nice shirt man, where did u buy it?

@lthoedt 5 лет назад

i have to do it FIRST

@lee_sung_studio 10 месяцев назад

14:28

@danushkaanurada6936 5 лет назад

What is that editor name..

@TheCodingTrain 5 лет назад

VSCode! For more: ru-vid.com/group/PLRqwX-V7Uu6Zu_uqEA6NqhLzKLACwU74X

@sifatmoonjerin2479 4 года назад

I miss my Bubble... :(

@toastyPredicament 2 года назад

Sleepy pill for dream please

@toastyPredicament 2 года назад

Oh Dan

@mvmo4744 5 лет назад

Somehow classes in JavaScript feel wrong to me :(

@robotosailr2129 3 года назад

now understand es6 better

@ultimade9610 5 лет назад

Third

@wanafnanhariz7650 3 года назад

i really like your videos, i do, but the theme(rainbow, unicorn and stuff) ,is not that i dont like them, its just remind me of weed...and make me wonder why u use that theme... XD