Advanced JS Fundamentals to jQuery & Pure DOM Scripting Shared Properties & Prototype Methods

Transcript from the "Shared Properties & Prototype Methods" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Alexis: Prototypal Inheritance, prototype based inheritance. To me inheritance is a loose term. But how we treat the concept of inheritance in JavaScript. Let's talk about prototypes, prototype based inheritance. How we can reuse methods or functions in JavaScript in a smart way. So, let's talk a little bit about what we would maybe consider unexpected behavior, but we're gonna talk about how we can kinda manipulate this to do some really smart things.

[00:00:39] So, first thing that most people will consider unexpected is the concept of properties in an inheritance tree somewhere. So let's observe this code really quickly. We have an animal function and inside our constructor function we're gonna say this.offspring and it will be in array. So every time you create a new animal, it will have a property called offspring which will start out as an empty array.

[00:01:09] Then, we're gonna create a dog and the way we link objects together, our constructs together, is by saying something like dog.prototype equals new animal. This is what's gonna link our pro to the prototype of our constructor, I know that's a mouthful when you think about all those big words at once, but this is exactly what we had on this little diagram.

[00:01:37] Is we're creating a new object, with its proto property, pointed to animals prototype, in this case. So that way, if you're looking for some kind of method or property on dog, or an instance of a dog, and it's not found, it's gonna look up its proto-chain and look for those same methods on animal.

[00:01:54] Which makes sense. That something we would want to behave. Look for characteristics to all animals. Bulldogs should have those characteristics as well. Then we're gonna do these next three lines, were gonna create three new dogs. Dog one, dog two, and pup. Three new instances of dogs. I think we're good there.

[00:02:14] But this is the part where it gets a little tricky, dog1.offspring,push, cuz offspring is an array. Dog1.offspring.push pup, and technically we can push anything on we want to, but we're gonna push pup on there. Dog2.offspring, what do you guys think that's gonna be?
>> Alexis: Anybody?
>> Speaker 2: Just an MPRA.

[00:02:52]
>> Alexis: An MPRA.
>> Speaker 2: An array with pup in it.
>> Alexis: An array with pup in it. Okay. Yeah, these are good answers. I would expect this to be an empty array too, but it's not. It is gonna be an array with pup in it. And that's really weird, just looking and taking this kind of code at face value.

[00:03:11] But, we'll show you what this looks like in memory. And it's gonna make a little bit more sense. So, let's talk about, this is shared property, let's talk about adding methods on a prototype, what this looks like. So, we had a little bit of exposure to it in the last exercise.

[00:03:25] We had our speaks method, where we wanted to walk up the proto chain, look for a method and then invoke it with our context. Here we're gonna have an eats method. All animals eat things. No matter how far down you are on the chain, as long as you inherit from animal, you'll have the function, the ability to eat things.

[00:03:47] So here we're gonna have Animal.prototype.eats. And this function will just say whatever this, whatever the context we're using, .name is eating. That's all we're gonna do. What this does in memory, is it creates this kind of structure. We have animal, which is a pointer to a function, that function is gonna have a prototype which is just an object, and we've added an eats function on there.

[00:04:11] Eats is a pointer to a new function we've created, this is our footprint. So when we come along and say, sponge equals new Animal Bob. This is our new animal we've created. It's gonna create a new object in memory and it's gonna set the proto property to Animals Prototype.

[00:04:37]
>> Alexis: It's a really tricky, or maybe it's a hard to memorize distinction, but a really really important. A new object with its proto property pointed to the prototype of its constructor. So animal, in this case, is its constructor. And then, we're going to invoke this animals a method, we're gonna invoke animal with the context of our new object, which is this sponge down below.

[00:05:04] And all we're doing inside the constructor is setting the name property. So list that name. This is gonna be our sponge. And its name pointer is going to point to this new primitive string called Bob.