📄 Table of Contents

◉ “4” Pillars of Inheritance

◉ Abstraction

document.getElementById("elem")

◉ Encapsulation

function Person() { // private variables
var dob = "21-09-1988";
//public properties and methods return{
age: "30",
name: "ak",
getDOB: function () {
return dob;
}
}
}
var foo = new Person();
console.log(foo.dob); # undefined
console.log(foo.getDOB()); # 21-09-1988

◉ Polymorphism

◉ Inheritance

[1]. Prototypal inheritance using Object.create() & call()

source: Source: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance
Father.call(this);

◉ JavaScript Inheritance with “Object.create”

Can we access those property using new Object ?

Accessing Method of the Prototypal Chain

Overriding the values of Prototype Chain

Advantages of Object.create

Disadvantages of “Object.create”

Object.create() Exercises

Object.create() Exercise
Object.create() Exercise

[2]. Classical inheritance using Extends() & super()

class Son extends Father 
// this will get converted into the prototype object i.e.
Son.prototype.__proto__ will be Father.prototype

Javascript is prototype-based only, in class inheritance also, it works on top of prototypal inheritance (mechanism).

Overriding constructor

Derived Class with no constructor of its own

◉ is constructor mandatory in a class?

constructor() {}
constructor(...args) {
super(...args);
}

◉ Composition over Inheritance (recommended in React)

Composition is recommended over Inheritance in React

◉ Private Members in JavaScript

Objects

➪ Public

🔹In the constructor

function Container(param) {
this.member = param;
}
var myContainer = new Container('abc');

🔹 In the prototype

Container.prototype.stamp = function (string) {
return this.member + string;
}
myContainer.stamp('def')

➪ Private

function Container(param) {
this.member = param;
var secret = 3;
var that = this;
}
function Container(param) {

function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}

this.member = param;
var secret = 3;
var that = this;
}

➪ Privileged

function Container(param) {

function dec() {
if (secret > 0) {
secret -= 1;
return true;
} else {
return false;
}
}

this.member = param;
var secret = 3;
var that = this;

this.service = function () {
return dec() ? that.member : null;
};
}

Closures

Patterns

🔹Public

function Constructor(...) {
this.membername = value;
}
Constructor.prototype.membername = value;

🔹 Private

function Constructor(…) {
var that = this;
var membername = value;
function membername(…) {…}
}
function membername(...) {...}
var membername = function membername(...) {...};

🔹Privileged

function Constructor(...) {
this.membername = function (...) {...};
}

References:

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.