16.17: Inheritance in JavaScript – Topics of JavaScript/ES6



In this video, I discuss the concept of inheritance in Object-Oriented Programming (OOP) with JavaScript and using ES6 classes.

🎥Classes (JS): https://youtu.be/T-HGdc8L-7w
🎥Polymorphism (JS): https://youtu.be/8a5BkwuZRK0

🎥Encapsulation (Java) : https://youtu.be/YcbcfkLzgvs
🎥Inheritance (Java) : https://youtu.be/e6eXD8DHc_A
🎥Polymorphism (Java): https://youtu.be/qqYOYIVrso0

🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
📚 Books: https://www.amazon.com/shop/thecodingtrain

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Original source

49 thoughts on “16.17: Inheritance in JavaScript – Topics of JavaScript/ES6

  • April 5, 2020 at 07:22
    Permalink

    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.

  • April 5, 2020 at 07:22
    Permalink

    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!

  • April 5, 2020 at 07:22
    Permalink

    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.

  • April 5, 2020 at 07:22
    Permalink

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

  • April 5, 2020 at 07:22
    Permalink

    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?

  • April 5, 2020 at 07:22
    Permalink

    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! 🙂

  • April 5, 2020 at 07:22
    Permalink

    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

  • April 5, 2020 at 07:22
    Permalink

    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.

  • April 5, 2020 at 07:22
    Permalink

    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.

  • April 5, 2020 at 07:22
    Permalink

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

  • April 5, 2020 at 07:22
    Permalink

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

  • April 5, 2020 at 07:22
    Permalink

    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?

  • April 5, 2020 at 07:22
    Permalink

    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.

  • April 5, 2020 at 07:22
    Permalink

    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);
    }
    }

  • April 5, 2020 at 07:22
    Permalink

    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.

Leave a Reply