Prototypes and Prototypal Inheritance - Javascript In Depth

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ก.ค. 2024
  • We take a look at Prototypes as well as Prototypal Inheritance together in Javascript. This is a concept that underpins everything we do in Javascript and answers questions about the properties on the Objects and types we've been using in Javascript up until now.
    Understanding prototypes will also set us up really nicely in our conceptual understanding of how Classes and Object Oriented Programming work in Javascript. These new keywords and additions to the language will leverage the built-in Prototypes that Javascript has to simulate the ideas of "classes" in the language for us.
    Note that this is an advanced topic and will take a lot of practice and trying different things over time to really cement. We'll go through some practice exercises together on prototypes in the next video in the series.
    This is part of a series where we go over Javascript in depth to learn programming concepts as well as web development: • Javascript In Depth
    Chapters:
    00:00 Introduction
    01:43 Prototypes and Prototypal Inheritance
    02:42 Mysterious Properties
    04:27 Properties Recap Code Example
    10:03 The Object [[ Prototype ]]
    13:10 [[ Prototype ]] Getters
    14:38 First Prototype Code Example
    19:49 The Prototype Chain
    23:38 Prototype Chain Code Example
    27:28 Static Object Properties
    29:45 Static Properties Code Example
    32:42 Static vs Prototype Properties
    38:27 Setting a Different Prototype
    40:42 Prototype Setting Code Example
    45:55 The "new" keyword with Prototypes
    48:25 Next Steps
    📦 Github Repository with the notes and exercise code+solutions: github.com/Nooder/javascript-...
    💬 Come join us on Discord to chat with a like-minded community about tech and learning: / discord
    🏅Support the channel and content through Super Thanks, Channel Memberships, or on Patreon: / techwithnader
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 24

  • @TechWithNader
    @TechWithNader  ปีที่แล้ว +8

    Hey everyone! Just wanted to add a correction to the last section - The "new" keyword with Prototypes:
    The Animal prototype does not have "type" in it. "Type" is just in the individual instances of Animal. In order to add it to the prototype of Animal, we'd need to do: Animal.prototype.type = _something_; Just like we saw with the Object.prototype before it.
    I also forgot to remove "speak" from the Object prototype from the earlier slide, haha sorry! This again would only be here if we assigned to Object.prototype.speak and then had this code as well.
    Hope that helps and doesn't confuse things more! 😊

  • @nanlunglongtau2076
    @nanlunglongtau2076 4 หลายเดือนก่อน +2

    Discovering this channel is like discovering gold

  • @nadeem-cp9is
    @nadeem-cp9is 4 หลายเดือนก่อน +2

    you have the gift of being able to teach really well , thank u so much , i am currently watching your js in depth playlist and it's amazing , keep going

  • @flnnx
    @flnnx ปีที่แล้ว +6

    One of the best JS channels on YT! I've been following u for a while now and I've learned so much! Thank you for the awesome in depth content.

    • @TechWithNader
      @TechWithNader  ปีที่แล้ว +1

      Hey Fln! Thank you so much for the kind words! It really means a lot and it’s comments like this that help me keep going 😊
      If you’re interested, here’s a link to the Discord server we have where we’re also building a community on all this: discord.gg/9SZbqWvMrV

  • @dharsanr6504
    @dharsanr6504 7 หลายเดือนก่อน +1

    wow you just blew my mind with your amazing explanation nader , thank you soo much for providing such a quality content , keep going : )

  • @shivanshmishra7992
    @shivanshmishra7992 ปีที่แล้ว +4

    This guy has some quality content and great explanations

    • @TechWithNader
      @TechWithNader  ปีที่แล้ว

      Thanks Shivansh! I’ll keep them coming 😊

  • @kimthan898
    @kimthan898 ปีที่แล้ว +5

    your content is so underrated

    • @TechWithNader
      @TechWithNader  ปีที่แล้ว

      Thanks Kim! I hope to keep creating more like this and sharing with the community 😊 Would love to know what makes you say that though vs the other content on youtube!

  • @ujjwalranjanraoietlucknows8151
    @ujjwalranjanraoietlucknows8151 11 หลายเดือนก่อน +1

    WoW... The only one on YT to actually clear all the fake prototypes.... Really cleared the Objects concepts

    • @TechWithNader
      @TechWithNader  11 หลายเดือนก่อน +1

      Thanks for the kind words! I'm glad this concept makes sense for you, since this is definitely an important but challenging topic! 🤓

    • @ujjwalranjanraoietlucknows8151
      @ujjwalranjanraoietlucknows8151 11 หลายเดือนก่อน

      But I got stuck....What does Object.getOwnPropertyNames(Object.__proto__) refers to?
      Object. getOwnPropertyNames (Object.__proto__._proto__) refers to prototype which contains construtor, definegetsetter....
      And one more thing MDN says usage of __proto__ should be discouraged...so how to use Obejct.getPrototypeOf??
      Pls help... I shall be highly thankful

  • @vishalbisht6871
    @vishalbisht6871 ปีที่แล้ว +2

    Better than 99.9% of prototypal tutorials.

  • @Abulkhair1995
    @Abulkhair1995 8 หลายเดือนก่อน +1

    you deserve 100 M subs

  • @user-oz7uv6sg2w
    @user-oz7uv6sg2w 6 หลายเดือนก่อน +1

    Very good explanation

  • @techexpertpremiere
    @techexpertpremiere ปีที่แล้ว +1

    Great explanation of JavaScript prototypes. I truly appreciate your hard work for this video.

  • @mahmoud.masoud
    @mahmoud.masoud ปีที่แล้ว +2

    Great video as usual

  • @kepdani
    @kepdani 11 หลายเดือนก่อน +1

    super interesting video, finally a nice explanation of the topic

  • @samueladehoun9248
    @samueladehoun9248 ปีที่แล้ว +2

    This is amazing and very clear. Keep up the good work.

    • @TechWithNader
      @TechWithNader  ปีที่แล้ว

      Thanks Samuel! Glad you found it helpful - this is a tricky topic 😊

  • @mathematics2265
    @mathematics2265 3 หลายเดือนก่อน

    26:58

  • @rylee5233
    @rylee5233 6 หลายเดือนก่อน +1

    The tutorial is fantastic