https://www.digitalocean.com/community/tutorials/understanding-prototypes-and-inheritance-in-javascript

note:

It is important to note that x.__proto__ is a legacy feature and should not be used in production code, and it is not present in every modern browser. However, we can use it throughout this article for demonstrative purposes.

Use Object.getPrototypeOf(x) instead.

Creating objects through Constructor Functions

Because each character will share many characteristics, such as having a name, and a level, we use a constructor functions to create templates for those common traits of each hero.

Every hero has a name, and a certain level of experience

// Initialize a constructor function for a new Hero

function Hero(name, level) {

this.name = name;

this.level = level;

}

We have created a constructor function called Hero with two parameters: name and level. Since every character will have a name and a level, it makes sense for each new character to have these properties.

The this keyword will refer to the new instance that is created, so setting this.name to the name parameter ensures the new object will have a name property set.

The hierarchy looks like this:

The Prototype Object

Whenever we create a constructor function, JS will automatically create a literal object that acts as the prototype object.

That literal object’s sole purpose is to contain functions and properties for all instantiations of your constructor functions.

Note that this object (like all objects of JS) derives from Object, and will have its __proto__ pointing to Object’s Prototype Object.

This literal object acts as the prototype object for Hero. It will also have a constructor property pointing back to your constructor function. Thus, making this prototype object the same type as your constructor function.

In our case, we create a constructor function “Hero” with its properties. JS gives us an empty literal object (Let’s call it Prototype Object) in order to act as a single object that keeps properties and functions that are shared among all instances of Hero.

Note that our Hero Prototype Object derives from Object and thus, has its __proto__ referencing Object‘s Prototype Object.

It then creates and assigns a “constructor” property from the Hero Prototype Object to your Hero constructor function. This makes the prototype object type Hero. Finally, it assigns the “prototype” property from your Hero constructor property onto the “Hero Prototype Object”.

Creating an Instance

1	let hero1 = new Hero('Grom', 1);

What this means is that any instantiations of Hero will have its OWN properties and functions from the Constructor function.
hero1 is an instance we just created. It has its own properties of name and level, as indicated from the constructor function Hero.

hence if we were to make three hero objects, hero1, hero2, and hero3, they all have their own unique properties of name, and level.
i.e

hero1 is “Grom”, level 1
hero2 is “Haomarush”, level 2
hero3 is “Thrall”, level 8

In addition, they ALL share the “Hero Prototype object”.

So if the “Hero Prototype object” has a property “nickname” initiated to “Orc”, then they would all have nickname = “Orc”.

Same goes for any functions and other properties that “Hero Prototype Object” may have.

Let’s check on how this works. First we display the prototype of our object hero1. You can do it in 2 ways:

1 2	console.log(Object.getPrototypeOf(hero1)); console.log(hero1.__proto__);

output:

Hero {}
Hero {}

Now repeat with hero2, hero3. You’ll see that their __proto__ all are Hero{}. They all point to the same Prototype Object Hero{}

Adding to the Prototype

Let’s add a property nickname to the prototoype, and see what it looks like:

1 2	Hero.prototype.nickname = "orc"; console.log(hero1.__proto__);

Now our “Hero Prototype Object” will look like this:

Hero { nickname: ‘orc’ }

This means that when we try to read a property from a Hero object, say from hero1,
– it will try to look for “nickname” in the hero1 instance first.
– When it does not find it, it will go up the hierarchy (i.e hero1.__proto__) into the prototype object, which it will then find.
– If it still does not find it, it will keep going up the prototype chain, hero1.__proto__, hero1.__proto__.__proto__….etc

console.log(hero1.nickname); // orc

console.log(hero2.nickname); // orc

console.log(hero3.nickname); // orc

If you were to change nickname:

1	Hero.prototype.nickname = "Superman";

console.log(hero1.nickname); // Superman

console.log(hero2.nickname); // Superman

console.log(hero3.nickname); // Superman

You cannot change it from the instantiation

Our hierarchy is like this.

We have our Hero instance, with its own properties of name and level. It has its __proto__ pointing to an object, with property “type”, which is
initialized to orc. It has its constructor back to Hero, and __proto__ references pointing to Object’s Prototype Object.

Simply put, don’t confuse yourself when you try to change a property or function of a prototype object.

You cannot change it through an instantiation like this:

1 2	let hero = new Hero("Jubei", 8); hero.type = "orc";

Erroneously, many people may think that it will see if nickname exist in the instantiation, it does not. Then it goes up to the prototype and finds it there. Then it just assigns the new string.

When it comes to setting values, JS will only let you access at the prototype level. It only let’s you read at the object level if the property does not exist at the object level.

If you do decide to assign at the object level, essentially Javascript will interpret it as you wanting to add a property called “type” to your instance, and then initialize it.

1 2	let hero = new Hero("blah", 4); hero.type = "human";

Thus, in the hierarchy, you’ll get two property called “type”. One is at the instance level. One is at the prototype level.

If you want to set the prototype object to a new value, you must do so through Object.prototype.YourPropertyName.

1	Hero.prototype.type = "human";

Different character classes of heroes

However, each hero has different abilities. Some wield different weapons. All have vastly different skills and abilities.

It wouldn’t make sense to put all the abilities for every class into the Hero constructor, because different classes will have different abilities.

We want to create new constructor functions, but we also want them to be connected to the original Hero.

Let’s take a look at how we can accomplish this with prototype inheritance and constructors.

The Warrior

We use call in order to chain constructors. Essentially, call replaces a function’s this reference to a passed in object.
Hence, we replace Hero’s constructor function’s this reference to point to Warrior’s this. Then, any kind of initialization done in Hero will take place in Warrior. In other words:

We first create a constructor function called Warrior. This identifies Warrior.
We then pass the “this” reference to Hero via function call. Using Warrior’s “this” reference, we start to construct it like a Hero. Essentially, we are doing chain constructors for Warrior. We want to first initialize Warrior to be a Hero with Hero’s properties and functions.
Then, we come back to Warrior, and initialize Warrior’s properties.

note: The JavaScript call() Method

The call() method is a predefined JavaScript function method.

It can be used to invoke (call) a function with an owner object as the first argument (parameter).
In our example, instance person calls fullName. However, fullName’s this is myObject.

1	x = person.fullName.call(myObject);

With call(), you can use a method belonging to another object.

This example calls the fullName function of person, but is using it on myObject:

var person = {

firstName:"John",

lastName: "Doe",

fullName: function() {

return this.firstName + " " + this.lastName;

}

var myObject = {

firstName:"Mary",

lastName: "Doe",

}

x = person.fullName.call(myObject);

document.getElementById("demo").innerHTML = x;

…back to our example…

In the extended object Warrior, we initialize Warrior with Hero’s properties via javascript’s call function.

// Initialize Warrior constructor

function Warrior(name, level, weapon) {

// Chain constructor with call

Hero.call(this, name, level);

// Add a new property

this.weapon = weapon;

}

So in the same way, we call Hero’s constructor, but with Warrior’s this.
We pass Warrior’s this into Hero’ constructor

// the 'this' used here is Warrior's

// Thus, warrior adds property name, and level, initialized from the parameters.

function Hero(name, level) {

this.name = name;

this.level = level;

}

Warrior total properties = Warrior own properties + Hero properties;

We’ll add the attack() method to Warrior because its what they do. We want all instances of Warrior to be able to attack, as they should.

Warrior.prototype.attack = function () {

return `${this.name} attacks with the ${this.weapon}.`;

}

1 2	let warriorHaomaru = new Warrior("Haomarush", 2,"Blade"); warriorHaomaru.attack(); // Haomarush attacks with the Blade.

Linking up the Prototype

So the warrior class has properties of the Hero class. But what about the Hero’s functionalities? Let’s say the Hero’s prototype has functionality to be able to run, jump, and swim.

The warrior, being a hero, should automatically have those functionalities as well.

From javascript standpoint, when you create Warriors, it will be setup in a similar fashion like Hero. You’ll get a Warrior Prototype Object. Your Warrior’s prototype reference will point to Warrior Prototype Object. Warrior Prototype Object will add and point “constructor” back to your Warrior.

Since Hero’s prototype properties and methods are not automatically linked when you use call() to chain constructors, our Warrior will use Object.create() to link the prototypes.

Now, given Hero’s hierarchy is like so:

In order to inherit Hero prototype
1) Warrior will first disregard its own prototype object
2) Use Object.create to clone its own Hero Prototype Object.
3) re-point Warrior’s prototype to this clone.

Note:
The Object.create() method creates a new object, using an existing object to provide the newly created object’s __proto__

Object.create

// 1) We want to create a custom Warrior Prototype Object.

// We create an empty object, with its __proto__

// pointing to Hero.prototype

// this means that literal object w uses Hero.prototype's

// functionalities. it does not have any properties

var w = Object.create(Hero.prototype);

w is simply a standalone object that has its __proto__ pointing to the Hero prototype object. It will be used as Warrior prototype object. But for now, let’s analyze this object:

const objA = {

eye: ['brown', 'almond'],

nationality: 'Chinese',

display: function() {

console.log(' -- function display --');

}

let tmp = Object.create(objA); // object instance

console.log(tmp);

console.log(tmp.prototype); // undefined

console.log(tmp.prototype.constructor); // error

Thus, as you can see, it does not have prototype property. It simply accesses all the functionalities of objA.

repoint Warrior’s prototype to our Hero Prototype Object clone

1	Warrior.prototype = w;

We simply want the type of all instances of Warrior to say Warrior {}.
It’s for clarity purposes.

1	w.constructor = Warrior;

We add an “attack function” to our custom Warrior Prototype Object.

w.attack = function () {

console.log(`${this.name} attacks with the ${this.weapon}.`);

}

1 2	let warriorHaomaru = new Warrior("Haomarush", 2,"Blade"); warriorHaomaru.attack(); // Haomarush attacks with the Blade.

We have class names’s prototype point to a literal object to denote that all
all instances of this class’s __proto__ should point to this literal object
for prototype functionalities. Since Warrior’s prototype now points to Hero Prototype object, this means all instances
of warriors have Hero Prototype Object’s prototype functionalities.

… given Hero Prototype functionality has jump, run, and swim, then our warrior will also be able to use these functionalities.

warriorHaomaru.jump();

warriorHaomaru.run();

warriorHaomaru.swim();

Now, all instances of Warrior can not only attack, but also jump, run, swim as well!

Double Prototype Level

Let’s create someone who has two types together.

First, we construct a Healer.

// Initialize Warrior constructor

function Healer(name, level, weapon, someSpell) {

// Chain constructor with call

Hero.call(this, name, level);

// Add a new property

this.spell = someSpell;

}

var h = Object.create(Hero.prototype);

Healer.prototype = h;

h.constructor = Healer;

okay, so have Healer created. It derives from Hero in properties and prototype functionality.

double class power: Mage

Now let’s create a special class called Mage, where we can heal like a Healer, but also have our own Mage special ability.

console.log("========= MAGE ============ ");

function Mage(name, level, weapon, spell, special) {

Healer.call(this, name, level, weapon, spell); // construct Healer first, with Mage's this

this.special = special;

}

const x = Object.create(Healer.prototype);

Mage.prototype = x;

x.constructor = Mage;

let mage1 = new Mage("Thrall", 99, "Ragnorak", "Life 3", "summons Bahamut");

mage1.greet();

mage1.heal();

console.log(mage1.special);

Structure

You’ll see that an instance of the Mage will inherit properties and functions of its deriving object Warrior, and its deriving object Hero, and Object.

Furthermore, it will be able to use the whole hierarchy of its own prototype, which includes Warrior, Hero, and Object.

console.log("\n\n --- Structure --- \n");

console.log(mage1);

console.log(mage1.__proto__);

console.log(mage1.__proto__.__proto__);

console.log(mage1.__proto__.__proto__.__proto__);

console.log(mage1.__proto__.__proto__.__proto__.__proto__);

— Structure —

Mage {
name: ‘Thrall’,
level: 99,
weapon: ‘Ragnorak’,
special: ‘summons Bahamut’ }

Mage { constructor: [Function: Mage] }

Healer { constructor: [Function: Healer], heal: [Function] }

Hero { greet: [Function] }

{}

source code example

function createPrototypeObjAndConnect(FuncConstructor, prototype, callbackForPrototypeFuncCreation) {

var prototypeObj = Object.create(prototype);

FuncConstructor.prototype = prototypeObj;

prototypeObj.constructor = FuncConstructor;

callbackForPrototypeFuncCreation(FuncConstructor);

}

function User(newName, newPassword) {

this.name = newName;

this.password = newPassword;

}

User.prototype.print = function() {

console.log('print');

}

function Admin(newName, newPassword) {

User.call(this, newName, newPassword);

this.roomsCanAdmin = ["Public", "Private"];

}

createPrototypeObjAndConnect(Admin, User.prototype, function(Func) {

Func.prototype.addRoom = function(roomName) {

console.log('Admin ' + this.name + ' added room ' + roomName);

}

Func.prototype.removeRoom = function(roomName) {

console.log('Admin ' + this.name + ' removed room ' + roomName);

}

Func.prototype.kickOutUser = function(userName) {

console.log('Admin ' + this.name + ' has kicked out ' + userName);

}

});

var w = new Admin("ricky-admin", "abcd1234");

w.print();

function SuperAdmin(newName, newPassword) {

Admin.call(this, newName, newPassword);

}

createPrototypeObjAndConnect(SuperAdmin, Admin.prototype, function(Func) {

Func.prototype.addUser = function(userName) {

console.log('SuperAdmin ' + this.name + ' has kicked out ' + userName);

}

Func.prototype.removeUser = function(userName) {

console.log('SuperAdmin ' + this.name + ' has kicked out ' + userName);

}

});

var s = new SuperAdmin("rtsao", "sudosudo");

s.addUser('jennifer');

s.addRoom("lounge");

s.print();

Chinese Rule of Eight

Prototype and Inheritance in JS (non-class)