Implement Object-Oriented Models in JavaScript

Instructor: [0:02] In line 1 of our JavaScript file here, we've defined what's called a constructor function. This one is called pastry(), and what it does is let us create objects based on a template.

[0:13] In this case, every pastry will be made up of three properties, a name, which is a string, and two Booleans, hasJam and hasSprinkles. Once these are assigned inside the function, we will now have an object made up of these three properties. In line 7, we define our first pastry, a cupcake. In line 15, we define our second pastry, a muffin.

[0:43] Every object in JavaScript has access to what's called a constructor property. We can use this to examine which constructor created it. Let's run our JavaScript here and take a look at what these two pastries have. Perhaps unsurprisingly, both of these have pastry() as their constructor. What if, partway through our code, we want to modify every created pastry to also be able to be eaten?

[1:10] We can do this by changing the prototype, which is a collection of shared properties and resources. Let's uncomment lines 9 through 13 to modify the prototype of the pastry to have an additional function called eat(), which you see in line 10. All this does is return a string made up of yummy and the name of the pastry.

[1:37] Now, let's re-examine those constructors. You're going to see something interesting happen here. If I run our file again, you're going to notice that the cupcake retains its constructor of pastry(). Look at what happened to the muffin.

[1:51] One of the interesting quirks of JavaScript is that resetting the prototype also resets the constructor. However, this doesn't mean that all is lost or that things are going to go wrong. Let's take a second and try to eat our muffin. In line 18, I've now uncommented console.log(muffin.eat()) Let's take a look at what happens.

[2:15] You'll see the output of yummy muffin. This means that not only did the prototype get successfully modified, but we still retain access to our properties, such as this.name. What does that mean? Does that mean the cupcake is also ready to be eaten? Let's give it a try.

[2:34] We get an error saying cupcake.eat is not a function, which makes sense because we only modified the prototype after we created the cupcake. What happened? We redefined the prototype, which means the constructor got reset, which is a little bit odd.

[2:52] Now, I want to show you classes, so let's move over to this other file. Classes were added with ECMAScript 2015 to be able to add syntactic sugar around this prototype and constructor model.

[3:04] In line 1, things are looking a little bit different. We've now got a class called Pastry, which has a constructor function inside, which looks very similar to the previous one. In line 9, we define our cupcake. In line 11, we modify the prototype, like we did previously. In line 17, we create our Muffin object.

[3:24] Let's take a look at those constructors again. You're going to see something a little bit different. Check it out. Both of them retain their Pastry() constructor, which sounds good, but there's a bit of a catch. Let's try eating our muffin, like we did previously, and check this out. Now, we get an error. muffin.eat is not a function.

[3:49] I thought we modified our prototype. Let's take a look at cupcakes, just in case. Can we eat cupcakes now? Turns out, like before, we can't. What's going on here?

[4:05] One of the changes that classes bring is that prototypes become read-only. This means that they can't be modified. This is to add that layer of safety around prototypes and constructors. That doesn't solve our problem, does it? We want to be able to have pastries created as of the cupcake to be able to be eaten.

[4:26] In order to do that with classes, we're going to take a look at subclasses. Let's go over to this file here, where we've got our class, like before, on line 1, our cupcake on line 9. But in lines 11 through 15, we've defined a new class called FreshPastry, which extends the Pastry class. This means that FreshPastry is a subclass of Pastry, and Pastry is a superclass of FreshPastry.

[4:55] Like before, we add to it the function eat(), which looks just like before. This means that all of the properties available to pastries are also available to fresh pastries. In line 17, we create our muffin, like we did before. However, instead of a new pastry, we're creating a new fresh pastry.

[5:17] Let's take a look at those constructors again in lines 21 and 22. You'll see that the cupcake will retain its Pastry() constructor, but muffins will now have a FreshPastry() constructor, which is good. That tells us clearly what they come from.

[5:36] Now, let's try eating our muffin, like we've done in the past. Happy to say, we can eat muffins again, which is a good thing. Cupcakes cannot be eaten. cupcake.eat is not a function. This shows us the relationship between prototypes, constructors, classes, and subclasses.