Prototype on the Mound

Our cohort was introduced to the prototype property for Javascript concurrently with our lessons in object-oriented Javascript. I sought to learn more and will share some initial discoveries in this post.

What is it?

First, it is important to note that while the prototype property becomes extremely relevant when building classes, prototype is actually a default object associated with all objects, functions and datatypes in Javascript.

For example, let’s say you created an array.

const exampleArray = [1, 2, 3]

If you looked into that array, you’ll see the prototype property lives on this object under the “__proto__” property.

What is that doing there? Well, prototype is like a guide for any object type, it contains functionality/methods that can be called on that object. There are a long list of methods available for arrays — concat, find, forEach, and shift to name a few.

exampleArray.push(4) 

Push, for example, is a method that lives within ‘proto’ that allows us to add items to the end of the array.

Ultimately, this is how JavaScript objects inherit features from one another. Now, why is this so important for Object-Oriented Javascript?

Let’s say we are working with a pitching staff of a baseball team. Each pitcher has a name, a hand they throw with (right or left), a number and a specialty pitch they throw.

We could create a new instance of the pitcher class as such:

const mariano = new Pitcher("mariano rivera", "right", 42, "cutter")
const strasburg = new Pitch("stephen strasburg", "right", 37, "fastball")

DRY

Prototype methods are only defined once, but when an instance wants to use it, it will automatically know how — it is shared. For this reason, you don’t need to repeat it across multiple objects.

When considering creating a prototype method, you should ask: “is this behavior shared by all instances of our class?” In this case, all pitchers need to warm-up before being called into a game. This is not a unique attribute for each pitcher, so you can define a prototype method in the following way.

Pitcher.prototype.warmUp = function(){
   console.log(`${this.name} begins to stretch and throw.')
}

You’ll now see this logged under the __proto__ variable of every Pitcher instance.

You can now call upon this new method for ANY INSTANCE OF PITCHER like so:

mariano.warmUp //=> "Mariano Rivera begins to stretch and throw." 

Manipulating Instances

Prototype methods can also be used to cleanly alter instances of an object or classes. Let’s say for example that the legendary 42 decided to drop the 4. You could write prototype method to allow any pitcher to change their number.

Now Mariano could change his number using:

mariano.changeNumber(2)

Data and Memory Save

Now, you are only calling these methods as needed throughout a program. If you had defined these methods within the constructor function, it would be run every single time an instance is created. While this allows your code to be more digestible and readable, it also reduces the memory used.