Intro

A short blog about how you can achieve "prototypal inheritance" in js (first part, how you can share behavior among objects).
A js concept that works differently from what you might expect (especially if you come from a java, c# background), Kyle Simpson (again) and his book series "You don't know JS" made it more clear to me.
I hope that the following blog might help you to understand one way to achieve inheritance (I hope the same for myself :)).

Why inheritance is different in js

Usually when we think about inheritance, we think that we have some class at our disposal that we can extend (copy) properties, behaviors to other subclasses.
Moreover, you can generate objects from a class (class works as a blueprint and the actual objects are instances of the class).
In js there are ''no classes'', we just have objects (e.g. you don't need a class in order to create an object you just get it!).
So, you need a tool to somehow create the illusion of inheritance (I took that from Kyle Simpson).
We can create this illusion by using the ''prototype property''.

Prototype

Prototype is just a reference to an object, you can add functions, simple properties etc.
Each constructor function has prototype property.

Let's see how we can take advantage of it and share behavior:

function Team(teamName) {
    this.teamName = teamName;
}

Team.prototype.getTeamName = function() {
    return `The team name is ${this.teamName}`;
}

barcelona = new Team("barcelona");
barcelona.teamColors = "blue and garnet";

olympiacos = new Team("olympiacos");
barcelona.teamColors = "red and white";

console.log(barcelona.getTeamName());
console.log(olympiacos.getTeamName());

What is happening in the above code:

• if you run the above script you get "The team name is barcelona" and "The team name is olympiacos", how that happened?
• the object ''barcelona'' and ''olympiacos'' have only one property the ''team colors'', there is no property ''getTeamName''
• but there is such a property in the ''prototype'' of the function constructor
• so, first checks if there is a property in the object, if there is not one then checks the prototype and if there is no such a property in the prototype you get undefined (more precisely in the prototype chain )

The behavior ''getTeamName()'' is shared among the objects, similar to an abstract class in OO languages (you can define some behavior/methods and if you extend the abstract class you also have them in the concrete).
But here the fundamental difference is that you don't have classes, you have just objects, so is more like objects collaboration rather than inheritance.
For instance, in the above example both objects olympiacos and barcelona didn't have the ''getTeamName()'' behavior, but the ''prototype'' object has that behavior!

To sum up

In this part a just wanted to demonstrate a way to share behavior among js objects.
In the next part I will try to explain how js can create inheritance similar to OO languages.
I will extend the example by introducing an extra function constructor called player (that "extends" the team).

Cheers!