Prototypes and Inheritance in JavaScript

Prototypes in JavaScript

It is assumed that you already are acquainted with object data types in JS, creating objects and how to modify object properties. Prototypes allow us to extend objects based on the fact that each JavaScript object includes [[Prototype]] as an internal property. To see this in action, let us create a new empty project like so:

let x = {};
let x = new Object().
Object.getPrototypeOf(x);
Output
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}
x.__proto__;
Output
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}

Inheritance

JavaScript initially searches on an object whenever you attempt to access its property or method, and if not found, it then proceeds to in its [[Prototype]]. If there still are no matches for the property at the [[Prototype]], JavaScript then tries checking from the linked object’s prototype until all objects in the chain are all covered n the search. Each chain contains Object.prototype at the end, whereby, there is an inheritance of methods and properties from Object. Searching beyond the chain always returns a null output. In our case above we have an empty object x, that bears inheritance from Object. If Object has any associated properties and methods, such as toString(), they all could be used x. for instance, we could have:

x.toString();
Output
[object Object]
x.__proto__.__proto__;
Output
null
let y = [];
let y = new Array()
y.__proto__;
[constructor: ƒ, concat: ƒ, pop: ƒ, push: ƒ, …]
y.__proto__.__proto__;
Output
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, …}
y.__proto__ === Array.prototype;            // true
y.__proto__.__proto__ === Object.prototype; // true
Array.prototype.isPrototypeOf(y);      // true
Object.prototype.isPrototypeOf(Array); // true
y instanceof Array; // true

Constructor Functions

Essentially, constructor functions create new JavaScript objects. Launching new instances that base on constructor functions, we use new operator. However, JavaScript also contains built-in constructors like new Array() and new Date(), but is also possible to create new ones that we the use create objects.

// Initialize a constructor function for a new Actor
function Actor(name, level) {
this.name = name;
this.level = level;
}
let actor1 = new Actor('Bjorn', 1);
Output
Actor {name: "Bjorn", level: 1}
Object.getPrototypeOf(actor1);
Output
constructor: ƒ Actor(name, level)
// Add greet method to the Actor prototype
Actor.prototype.greet = function () {
return `${this.name} says hello.`;
}
Actor1.greet();
Output
"Bjorn says hello."
// Initialize Soldier constructor
function Soldier(name, level, weapon) {
// Chain constructor with call
Actor.call(this, name, level);
// Add a new property
this.weapon = weapon;
}
// Initialize Doctor constructor
function Doctor(name, level, spell) {
Doctor.call(this, name, level);
this.spell = spell;
}
Soldier.prototype.attack = function () {
return `${this.name} attacks with the ${this.weapon}.`;
}
Doctor.prototype.heal = function () {
return `${this.name} casts ${this.spell}.`;
}
characterSelect.js
const actor1 = new Soldier('Bjorn', 1, 'axe');
const actor2 = new Doctor('Kanin', 1, 'cure');
Soldier {name: "Bjorn", level: 1, weapon: "axe"}
actor1.attack();
Console
"Bjorn attacks with the axe."
actor1.greet();
Output
Uncaught TypeError: actor1.greet is not a function
Soldier.prototype = Object.create(Actor.prototype);
Doctor.prototype = Object.create(Actor.prototype);
// We add all other prototype methods below
Doctor.
actor1.greet();
Output
"Bjorn says hello."
// Initialize constructor functions
function Actor(name, level) {
this.name = name;
this.level = level;
}
function Soldier(name, level, weapon) {
Actor.call(this, name, level);
this.weapon = weapon;
}
function Doctor(name, level, spell) {
Actor.call(this, name, level);
this.spell = spell;
}
// Link prototypes and add prototype methods
Soldier.prototype = Object.create(Actor.prototype);
Doctor.prototype = Object.create(Actor.prototype);
Actor.prototype.greet = function () {
return `${this.name} says hello.`;
}
Soldier.prototype.attack = function () {
return `${this.name} attacks with the ${this.weapon}.`;
}
Doctor.prototype.heal = function () {
return `${this.name} casts ${this.spell}.`;
}
// Initialize individual character instances
const actor1 = new Soldier('Bjorn', 1, 'axe');
const actor2 = new Doctor('Kanin', 1, 'cure');

Conclusion

Unlike traditional class-based programming languages, JavaScript is based on prototypes. We have explored its prototypes and learnt how to link objects into chains through [[Prototype]] property. We’ve also passed down properties of prototypes through the chain.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com