This post is designed to be read after you read JavaScript Private and Public Class Fields.
Previously we learned how to create an Animal class both in ES5 as well as in ES6. We also learned how to share methods across those classes using JavaScript's prototype. To review, here's the code we saw in an earlier post.
function Animal (name, energy) {
this.name = name
this.energy = energy
}
Animal.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Animal.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
Animal.prototype.play = function (length) {
console.log(`${this.name} is playing.`)
this.energy -= length
}
const leo = new Animal('Leo', 7)
class Animal {
constructor(name, energy) {
this.name = name
this.energy = energy
}
eat(amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
sleep() {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
play() {
console.log(`${this.name} is playing.`)
this.energy -= length
}
}
const leo = new Animal('Leo', 7)
Now let's say we wanted to start making individual classes for specific animals. For example, what if we wanted to start making a bunch of dog instances. What properties and methods will these dogs have? Well, similar to our Animal class, we could give each dog a name, an energy level, and the ability to eat, sleep, and play. Unique to our Dog class, we could also give them a breed property as well as the ability to bark. In ES5, our Dog class could look something like this
function Dog (name, energy, breed) {
this.name = name
this.energy = energy
this.breed = breed
}
Dog.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Dog.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
Dog.prototype.play = function (length) {
console.log(`${this.name} is playing.`)
this.energy -= length
}
Dog.prototype.bark = function () {
console.log('Woof-Woof!')
this.energy -= .1
}
const charlie = new Dog('Charlie', 10, 'Goldendoodle')
Alright, well... we just recreated the Animal class and added a few new properties to it. If we wanted to create another animal, say a Cat, at this point we'd again have to create a Cat class, duplicate all the common logic located in the Animal class to it, then add on Cat specific properties just like we did with the Dog class. In fact, we'd have to do this for each different type of animal we created.
function Dog (name, energy, breed) {}
function Cat (name, energy, declawed) {}
function Giraffe (name, energy, height) {}
function Monkey (name, energy, domesticated) {}
This work, but it seems wasteful. The Animal class is the perfect base class. What that means is that it has all the properties that each one of our animals has in common. Whether we're creating a dog, cat, giraffe, or monkey, all of them will have a name, energy level, and the ability to eat, sleep, and play. With that said, is there a way we can utilize the Animal class whenever we create the individual classes for each different animal? Let's try it out. I'll paste the Animal class again below for easy reference.
function Animal (name, energy) {
this.name = name
this.energy = energy
}
Animal.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Animal.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
Animal.prototype.play = function (length) {
console.log(`${this.name} is playing.`)
this.energy -= length
}
function Dog (name, energy, breed) {
}
What are some things we know about the Dog constructor function above?
First, we know it takes 3 arguments, name, energy, and breed.
Second, we know it's going to be called with the new keyword so we'll have a this object.
And third, we know we need to utilize the Animal function so that any instance of dog will have a name, energy level, and be able to eat, sleep, and play.
It's the third one that's the tricky one. The way you "utilize" a function is by calling it. So we know that inside of Dog, we want to call Animal. What we need to figure out though is how we can invoke Animal in the context of Dog. What that means it that we want to call Animal with the this keyword from Dog. If we do that correctly, then this inside of the Dog function will have all the properties of Animal (name, energy). If you remember from a previous section, every function in JavaScript has a .call method on it.
.call() is a method on every function that allows you to invoke the function specifying in what context the function will be invoked.
This sounds like exactly what we need. We want to invoke Animal in the context of Dog.
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
const charlie = new Dog('Charlie', 10, 'Goldendoodle')
charlie.name // Charlie
charlie.energy // 10
charlie.breed // Goldendoodle
Solid, we're half-way there. You'll notice in the code above that because of this line Animal.call(this, name, energy), every instance of Dog will now have a name and energy property. Again, the reason for that is because it's as if we ran the Animal function with the this keyword generated from Dog. Then after we added a name and energy property to this, we also added a breed property just as we normally would.
Remember the goal here is to have each instance of Dog have not only all the properties of Animal, but also all the methods as well. If you run the code above, you'll notice that if you try to run charlie.eat(10) you'll get an error. Currently every instance of Dog will have the properties of Animal (name and energy), but we haven't done anything to make sure that they also have the methods (play, eat, sleep).
Let's think about how we can solve this. We know that all the Animal's methods are located on Animal.prototype. What that means is we somehow want to make sure that all instances of Dog will have access to the methods on Animal.prototype. What if we used our good friend Object.create here? If you'll remember, Object.create allows you to create an object which will delegate to another object on failed lookups. So in our case, the object we want to create is going to be Dog's prototype and the object we want to delegate to on failed lookups is Animal.prototype.
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Now, whenever there's a failed lookup on an instance of Dog, JavaScript will delegate that lookup to Animal.prototype. If this is still a little fuzzy, re-read A Beginner's Guide to JavaScript's Prototype where we talk all about Object.create and JavaScript's prototype.
Let's look at the full code together then we'll walk through what happens.
function Animal (name, energy) {
this.name = name
this.energy = energy
}
Animal.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Animal.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
Animal.prototype.play = function (length) {
console.log(`${this.name} is playing.`)
this.energy -= length
}
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Now we've created our base class (Animal) as well as our subclass (Dog), let's see what it looks like under the hood when we create an instance of Dog.
const charlie = new Dog('Charlie', 10, 'Goldendoodle')
charlie.name // Charlie
charlie.energy // 10
charlie.breed // Goldendoodle
Nothing fancy so far, but let's look at what happens when we invoke a method located on Animal.
charlie.eat(10)
/*
1) JavaScript checks if charlie has an eat property - it doesn't.
2) JavaScript then checks if Dog.prototype has an eat property
- it doesn't.
3) JavaScript then checks if Animal.prototype has an eat property
- it does so it calls it.
*/
The reason Dog.prototype gets checked is because when we created a new instance of Dog, we used the new keyword. Under the hood, the this object that was created for us delegates to Dog.prototype (seen in comments below).
function Dog (name, energy, breed) {
// this = Object.create(Dog.prototype)
Animal.call(this, name, energy)
this.breed = breed
// return this
}
The reason Animal.prototype gets checked is because we overwrote Dog.prototype to delegate to Animal.prototype on failed lookups with this line
Dog.prototype = Object.create(Animal.prototype)
Now one thing we haven't talked about is what if Dog has its own methods? Well, that's a simple solution. Just like with Animal, if we want to share a method across all instances of that class, we add it to the function's prototype.
...
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.bark = function () {
console.log('Woof Woof!')
this.energy -= .1
}
👌 very nice. There's just one small addition we need to make. If you remember back to the Beginner's Guide to JavaScript's Prototype post, we were able to get access to the instances' constructor function by using instance.constructor.
function Animal (name, energy) {
this.name = name
this.energy = energy
}
const leo = new Animal('Leo', 7)
console.log(leo.constructor) // Logs the constructor function
As explained in the previous post, "the reason this works is because any instances of Animal are going to delegate to Animal.prototype on failed lookups. So when you try to access leo.constructor, leo doesn't have a constructor property so it will delegate that lookup to Animal.prototype which indeed does have a constructor property."
The reason I bring this up is because in our implementation, we overwrote Dog.prototype with an object that delegates to Animal.prototype.
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.bark = function () {
console.log('Woof Woof!')
this.energy -= .1
}
What that means is that now, any instances of Dog which log instance.constructor are going to get the Animal constructor rather than the Dog constructor. You can see for yourself by running this code -
function Animal (name, energy) {
this.name = name
this.energy = energy
}
Animal.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Animal.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
Animal.prototype.play = function (length) {
console.log(`${this.name} is playing.`)
this.energy -= length
}
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.bark = function () {
console.log('Woof Woof!')
this.energy -= .1
}
const charlie = new Dog('Charlie', 10, 'Goldendoodle')
console.log(charlie.constructor)
Notice it gives you the Animal constructor even though charlie is a direct instance of Dog. Again, we can walk through what's happening here just like we did above.
const charlie = new Dog('Charlie', 10, 'Goldendoodle')
console.log(charlie.constructor)
/*
1) JavaScript checks if charlie has a constructor property - it doesn't.
2) JavaScript then checks if Dog.prototype has a constructor property
- it doesn't because it was deleted when we overwrote Dog.prototype.
3) JavaScript then checks if Animal.prototype has a constructor property
- it does so it logs that.
*/
How can we fix this? Well, it's pretty simple. We can just add the correct constructor property to Dog.prototype once we overwrite it.
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.bark = function () {
console.log('Woof Woof!')
this.energy -= .1
}
Dog.prototype.constructor = Dog
At this point if we wanted to make another subclass, say Cat, we'd follow the same pattern.
function Cat (name, energy, declawed) {
Animal.call(this, name, energy)
this.declawed = declawed
}
Cat.prototype = Object.create(Animal.prototype)
Cat.prototype.constructor = Cat
Cat.prototype.meow = function () {
console.log('Meow!')
this.energy -= .1
}
This concept of having a base class with subclasses that delegate to it is called inheritance and it's a staple of Object Oriented Programming (OOP). If you're coming from a different programming language, odds are you're already familiar with OOP and inheritance. Before ES6 classes, in JavaScript, inheritance was quite the task as you can see above. You need to understand now only when to use inheritance, but also a nice mix of .call, Object.create, this, and FN.prototype - all pretty advanced JS topics. Let's see how we'd accomplish the same thing using ES6 classes though.
First, let's review what it looks like to go from an ES5 "class" to an ES6 class using our Animal class.
function Animal (name, energy) {
this.name = name
this.energy = energy
}
Animal.prototype.eat = function (amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
Animal.prototype.sleep = function (length) {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
Animal.prototype.play = function (length) {
console.log(`${this.name} is playing.`)
this.energy -= length
}
const leo = new Animal('Leo', 7)
class Animal {
constructor(name, energy) {
this.name = name
this.energy = energy
}
eat(amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
sleep() {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
play() {
console.log(`${this.name} is playing.`)
this.energy -= length
}
}
const leo = new Animal('Leo', 7)
Now that we've refactored our Animal constructor function into an ES6 class, the next thing we need to do is figure out how to refactor our base class (Dog). The good news is it's much more intuitive. For reference, in ES5, here's what we had.
function Dog (name, energy, breed) {
Animal.call(this, name, energy)
this.breed = breed
}
Dog.prototype = Object.create(Animal.prototype)
Dog.prototype.bark = function () {
console.log('Woof Woof!')
this.energy -= .1
}
Dog.prototype.constructor = Dog
Before we get into inheritance, let's refactor Dog to use an ES6 class as we learned in a previous post.
class Dog {
constructor(name, energy, breed) {
this.breed = breed
}
bark() {
console.log('Woof Woof!')
this.energy -= .1
}
}
Looks great. Now, let's figure out how to make sure that Dog inherits from Animal. The first step we need to make is a pretty straight forward one. With ES6 classes, you can extend a base class with this syntax
class Subclass extends Baseclass {}
Translated into our example, that would make our Dog class look like this
class Animal {
constructor(name, energy) {
this.name = name
this.energy = energy
}
eat(amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
sleep() {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
play() {
console.log(`${this.name} is playing.`)
this.energy -= length
}
}
class Dog extends Animal {
constructor(name, energy, breed) {
this.breed = breed
}
bark() {
console.log('Woof Woof!')
this.energy -= .1
}
}
In ES5 in order to make sure that every instance of Dog had a name and an energy property, we used .call in order to invoke the Animal constructor function in the context of the Dog instance. Luckily for us, in ES6 it's much more straight forward. Whenever you are extending a baseclass and you need to invoke that baseclass' constructor function, you invoke super passing it any arguments it needs. So in our example, our Dog constructor gets refactored to look like this
class Animal {
constructor(name, energy) {
this.name = name
this.energy = energy
}
eat(amount) {
console.log(`${this.name} is eating.`)
this.energy += amount
}
sleep() {
console.log(`${this.name} is sleeping.`)
this.energy += length
}
play() {
console.log(`${this.name} is playing.`)
this.energy -= length
}
}
class Dog extends Animal {
constructor(name, energy, breed) {
super(name, energy) // calls Animal's constructor
this.breed = breed
}
bark() {
console.log('Woof Woof!')
this.energy -= .1
}
}
And that's it. No using .call, no using Object.create, no worrying about resetting constructor on the prototype - just extends the baseclass and make sure to call super.
What's interesting about JavaScript is the same patterns you've learned these last few posts are directly caked into the language itself. Previously you learned that the reason all instances of Array have access to the array methods like pop, slice, filter, etc are because all of those methods live on Array.prototype.
console.log(Array.prototype)
/*
concat: ƒn concat()
constructor: ƒn Array()
copyWithin: ƒn copyWithin()
entries: ƒn entries()
every: ƒn every()
fill: ƒn fill()
filter: ƒn filter()
find: ƒn find()
findIndex: ƒn findIndex()
forEach: ƒn forEach()
includes: ƒn includes()
indexOf: ƒn indexOf()
join: ƒn join()
keys: ƒn keys()
lastIndexOf: ƒn lastIndexOf()
length: 0n
map: ƒn map()
pop: ƒn pop()
push: ƒn push()
reduce: ƒn reduce()
reduceRight: ƒn reduceRight()
reverse: ƒn reverse()
shift: ƒn shift()
slice: ƒn slice()
some: ƒn some()
sort: ƒn sort()
splice: ƒn splice()
toLocaleString: ƒn toLocaleString()
toString: ƒn toString()
unshift: ƒn unshift()
values: ƒn values()
*/
You also learned that the reason all instances of Object have access to methods like hasOwnProperty and toString is because those methods live on Object.prototype.
console.log(Object.prototype)
/*
constructor: ƒn Object()
hasOwnProperty: ƒn hasOwnProperty()
isPrototypeOf: ƒn isPrototypeOf()
propertyIsEnumerable: ƒn propertyIsEnumerable()
toLocaleString: ƒn toLocaleString()
toString: ƒn toString()
valueOf: ƒn valueOf()
*/
Here's a challenge for you. With the list of Array methods and Object methods above, why does this code below work?
const friends = ['Mikenzi', 'Jake', 'Ean']
friends.hasOwnProperty('push') // false
If you look at Array.prototype, there isn't a hasOwnProperty method. Well if there isn't a hasOwnProperty method located on Array.prototype, how does the friends array in the example above have access to hasOwnProperty? The reason for that is because the Array class extends the Object class. So in our example above, when JavaScript sees that friends doesn't have a hasOwnProperty property, it checks if Array.prototype does. When Array.prototype doesn't, it checks if Object.prototype does, then it invokes it. It's the same process we've seen throughout this blog post.
JavaScript has two types - Primitive types and Reference types.
Primitive types are boolean, number, string, null, and undefined and are immutable. Everything else is a reference type and they all extend Object.prototype. That's why you can add properties to functions and arrays and that's why both functions and arrays have access to the methods located on Object.prototype.
function speak(){}
speak.woahFunctionsAreLikeObjects = true
console.log(speak.woahFunctionsAreLikeObjects) // true
const friends = ['Mikenzi', 'Jake', 'Ean']
friends.woahArraysAreLikeObjectsToo = true
console.log(friends.woahArraysAreLikeObjectsToo) // true
This was originally published at TylerMcGinnis.com and is part of their Advanced JavaScript course.
Top comments (1)
It is awesome article. Great Job!