Skip to content
Intro to JS+prossecingJS
Intro to JS+prossecingJS
More
Share
Explore
Session 8

icon picker
Object-Oriented Design

When we create programs, we often find that we want to create many different objects that all share similar properties - like many cats, that have slightly different fur color and size, or many buttons, with different labels and positions. We want to be able to say "this is generally what a cat is like" and then say "let's make this specific cat, and this other cat, and they'll be similar in some ways and different in a few ways as well." In that case, we want to use object-oriented design to define object types and create new instances of those objects.
⁠

Object types

To define an object type in JavaScript, we first have to define a "constructor function". This is the function that we'll use whenever we want to create a new instance of that object type. Here's a constructor function for a Book object type:
The function takes in arguments for the aspects that will be different about each book - the title, author, and number of pages. It then sets the initial properties of the object based on those arguments, using the this keyword. When we use this in an object, we are referring to the current instance of an object, referring to itself. We need to store the properties on this to make sure we can remember them later.
To create an instance of a Book object, we declare a new variable to store it, then use the new keyword, followed by the constructor function name, and pass in the arguments that the constructor expects:
We can then access any properties that we stored in the object using dot notation:
Let's contrast this for a minute, and show what would have happened if we didn't set up our constructor function properly:
If we pass the arguments into the constructor function but do not explicitly store them on this, then we will not be able to access them later! The object will have long forgotten about them.
⁠

Object Methods

When we define object types, we often want to associate both properties and behavior with them - like all of our cat objects should be able to meow() and eat(). So we need to be able to attach functions to our object type definitions, and we can do that by defining them on what's called the object prototype:
It's like how we would define a function normally, except that we hang it off the Book's prototype instead of just defining it globally. That's how JavaScript knows that this is a function that can be called on any Book object, and that this function should have access to the this of the book that it's called on.
We can then call the function (which we call a method, since it's attached to an object), like so:
Remember, the whole point of object-oriented design is that it makes it easy for us to make multiple related objects (object instances). Let's see that in code:
That code gives us three books that are similar - they all have the same types of properties and behavior, but also different. Sweet!
⁠

Object Inheritance

Now, if you think about the world, cats and dogs are different types of objects, so you'd probably create different object types for them if you were programming a Cat and a Dog. A cat would meow(), a dog would bark(). But they're also similar- both a cat and dog would eat(), they both have an age, and a birth, and a death. They're both mammals, and that means they share a lot in common, even if they're also different.
In that case, we want to use the idea of object inheritance. An object type could inherit properties and behavior from a parent object type, but then also have its own unique things about it. All the Cats and Dogs could inherit from Mammal, so that they wouldn't have to invent eat()ing from scratch. How would we do that in JavaScript?
Let's go back to our book example, and say that Book is the "parent" object type, and we want to make two object types that inherit from it - Paperback and EBook. Just to remember what the Book constructor was, here is the code:
Object types
Object Methods
Object Inheritance
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.