Inheritance

• Inheritance is one of the core concepts of object-oriented programming that enables an object to take on/inherit the properties and methods of another object and this makes it easy to reuse code in different parts of an application

Example

• Shape class is the base class, or super class, or parent class.
• Circle as the derived class or sub class, or child class,
• Inheritance relationship as IS -A relationship. So, you say circle IS-A shape.

Prototypes

• Two types of inheritance, classical and prototypical
• Every object has a prototype or a parent, except the root object.
• All JavaScript objects inherit properties and methods from a prototype
• When you access a property or a method on an object, JavaScript engine first looks for that property or method first on the object itself. If it can't find it, then it looks at the prototype for that object. Again, if it can't find that member, it will look at the prototype of that object all the way up to the root object
• To get the prototype of an object use Object.getPrototypeOf
• Objects created by a given constructor will have the same prototype.

let x = {};
let y = {};
console.log(x.__proto__ === y.__proto__);
console.log(Object.getPrototypeOf(x) === Object.getPrototypeOf(y))

Constructor Prototype

• Constructors (Constructor function) has a prototype property which return an object that is used as the parent for objects created using the constructor.

console.log(Object.prototype === obj1.__proto__);
console.log(Array.prototype === array1.__proto__);
console.log(Circle.prototype === circle1.__proto__);

Instance and Prototype Members

• Instead of adding method to the construction function, you can add the method to the Prototype and prevent multiple copies of the method in the memory when you have multiple objects

In the below example, draw method is loaded in memory for each circle object

function Circle(radius) {
    this.radius = radius;
    this.draw = function() {
        console.log(this.radius);
    }
}
let  circle1 = new  Circle(10);
let  circle2 = new  Circle(20);

Adding method to prototype

Circle.prototype.move = function() {
    console.log(this.radius);
};

• Members added to the constructor are instance members and members added to the prototype are prototype members
• Prototype and instance members can call each other.
• You should not modify the built in objects in JavaScript Because it is possible you're going to use a library and in that library someone has also extended the prototype or the developers of Javascript add the same method in future versions of JavaScript.
• If you add methods to the prototype after creating object also, you can still call the methods

Iterating Instance and Prototype members

• for in loop returns both instance and prototype members.
• Object.keys only returns instance members.
• hasOwnProperty indicate whether the property is instance member or not

for(let key in circle1)
	console.log(key)

for(let key of Object.keys(circle1))
    console.log(key)

console.log(circle1.hasOwnProperty(radius));

Property Descriptors

• Configurable - whether you can delete the property
• Enumerable - whether you can enumerate the property
• Writable- whether you can overwrite the value or change the implementation
• Value property gets the value
• By default, all these attributes are true.

Get Property Descriptors

• Use getOwnPropertyDescriptor to get attributes defined for a member of an object

let obj1 = {};
let objectBase = Object.getPrototypeOf(obj1);
let descriptor = Object.getOwnPropertyDescriptor(objectBase, "toString");
console.log(descriptor);

Set Property Descriptors

• Use defineProperty to set the attributes for a member of an object

Set for object literal

let person = {name: "ganesh"};
console.log(Object.getOwnPropertyDescriptor(person, "name"));
Object.defineProperty(person, "name", {
   enumerable: false,
   writable: false,
   configurable: false
})
console.log(Object.getOwnPropertyDescriptor(person, "name"));

Set for Prototype

Object.defineProperty(Circle.prototype, "color", {
    writable: false
});
Object.defineProperty(Object.prototype, "toString", {
    writable: false
});

Override the behavior of Prototype

• You can override the behavior of existing method in prototype
• Only modify your own prototypes. Never modify the prototypes of built-in JavaScript objects.

Object.prototype.toString = function() {
    return "object string";
}