Learning Polymorphism | Prototype Class -2 | Completing OOPS
1 Like
class ParentClass {
constructor() {}
f1() {
console.log("Parent f1 is Invoked ");
}
}
class ChildClass extends ParentClass {
constructor() {
super(); // call your parent constructor
}
f1() {
console.log("Child f1 is Invoked ");
}
}
let childObject = new ChildClass();
childObject.f1(); // OUTPUT
1 Like
output is = Child f1 is Invoked .
Child- child f1 is invoked
1 Like
Child f1 is Invoked .
1 Like
Child f1 is Invoked
.
polymorphism defined as one name but many form.
polymorphism also called as overriding
override is the process in which child class also with some definitions
you can override parent method inside your child class.
let’s understand with Example of Overrding:-
class ParentClass {
constructor() {}
f1() {
console.log("Parent f1 is Invoked ");
}
}
//? You can overide Pareent method inside your Child Class → Overid
class ChildClass extends ParentClass {
constructor() {
super(); // call your parent constructor
}
f1() {
console.log("Parent f1 is Invoked ");
}
}
let childObject = new ChildClass();
childObject.f1();
// OUTPUT:-Child f1 is Invoked
1 Like
As we know JavaScript is a prototype-based language, which means that JS uses
> [Protypical Inheritance]
prototypes allows us to reuse by inherit properties and methods from one object to another through a reference pointer function.
In JavaScript, objects can be linked to other objects, forming a prototype chain.
`Two questions under topic Prototype:-`
`1) What happens when function created?
Ans:- When you create a function, prototype property and unnamed object are created. And we can access that unnamed object using functionName.prototype & we can access unnamed object using objectName if we have created objects for that function.
From Below Example :- Car.prototype or Alto.__proto__ both refers to unnamed object of Car function
2) What happens when object created from that function?
Ans:- When we create object for that function, we also get property called as __proto__. And we can access methods resides inside unnamed object using objName.__proto__`
function Car (name, price){
this.name = name;
this.price = price;
}
let alto = new Car("Audi5", "400000");
let bmw5 = new Car("BMW X1", "5000000");
console.log(alto);
console.log(Car.prototype); // Unnamed object (empty) -> {}
// Why unnamed object created?
// Defined class's method here
// Car.prototype refers to printInfo function inside unnamed object
Car.prototype.printInfo = function () {
// printInfo(){
// console.log("Name ==", this.name);
// console.log("Price ==", this.price);
// }
console.log("Name == ", this.name);
console.log("Price == ", this.price);
}
console.log(Car.prototype); //Res:- { printInfo: [Function (anonymous)] }
// Below code also refers to printInfo function inside unnamed object
alto.printInfo();
bmw5.printInfo();
// Car.prototype refers to unnamed object
Car.prototype.greetInfo = function () {
console.log("Happy");
console.log("Sad");
}
// Below code also refers to greetInfo function inside unnamed object
alto.greetInfo();
bmw5.greetInfo();
// alto.__proto__ & bmw5.__proto__ refers to unnamed object
alto.__proto__.f1 = function () {
console.log("Inside f1 function");
}
bmw5.__proto__.f1 = function () {
console.log("Inside f1 function");
}
// Below code also refers to f1 function inside unnamed object
alto.f1();
bmw5.f1();
if(Car.prototype == alto.__proto__){
console.log("Yes, they are same --> Unnamed object");
} // This condition is true so this line gets printed.
if(Car.prototype == bmw5.__proto__){
console.log("Yes, they are same --> Unnamed object");
} // This condition is also true so this line gets printed.
`Explanation for above example in Protoype:`
> Classes are Syntactical sugar in Javascript and it was introduced in ECMAScript 2015/2016
> But this classes also have prototype but this is very tricky to understand
> But in Interviews, they will ask about this prototype only as this is ur core JS concept.
> When u create any function like Car, we also get a property called Protoype & through this prototype automatically creates unnamed object internally to store our own defined functions inside class.
> Using Car.Prototype property, we can refer and access unnamed object & we can create a new function of class Car.
> When we create any object like alto & bMW, we get __proto__ property.
> Now we use alto.__proto__ to access unnamed object
> When we can create a new function printInfo() of class Car using Class.prototype & obj1.__proto__ properties.
> This function will reside inside unnamed object. So we can call it like alto.printInfo() or Car.protoype also.
`Conclusion:`
> So finally while we creating a function, get prototype & using this prototype can access unnamed object.
> How u access unnamed object?
- Function.prototype: functionName like Car.prototype
- Object.prototype: objectName like alto.__proto__
> Using both we can create function inside unnamed object too. And we access them normally.
> Why this unnamed object & its purpose?
- To store something like functions inside unnamed object.
> Which way is better way to access unnamed object?
- As per industry standard, we always use prototype way/method only.
- We never use __proto__ way/method which actually confuses us.
`⏳✅Bonus Interview Question from our Harshit sir:`
🚨📢🚩Q) Interviewer asks you to build your own function in string/Array?
Answers: We can also create our own function in String using String.prototype like pre-defined functions are toLowercase(), toUpperCase(), toString() etc. and Array using Array.prototype or can access their pre-defined functions for HTMLCollection / NodeList which are not fully array but similar to array.
📌🌟Eg1:-
let m = "MONISHA";
String.prototype.isMonisha = function () {
console.log(this.valueOf());
}
m.isMonisha(); //MONISHA
📌🌟Eg2:-
let u = "Raji";
String.prototype.isRaji = function () {
if(this.valueOf() == "Raji"){
return true;
} else {
return false;
}
};
console.log(u.isRaji()); //true
2 Likes
Just WOW Notes on Prototype 
Superb
1 Like
@harshitrajlnctcse
The prototype property of that function is used for the object to inherit methods from.Prototypes are the mechanism by which JavaScript objects inherit features from one another. This unnamed object {} will be also linked to Object.prototype
function Car(name, price) {
this.name = name;
this.price = price;
}
let alto = new Car(“alto”, “500000”);
let Bmw = new Car(“bmw”, “0000000”);
//console.log(alto);
//console.log(Car.prototype);///this is referencing the unanamed object that has no name it will be created whenever we create or define an function that could be refrenced by the “prototype” name
// we can add anything in this unnamed object by using “car.prototype”
Car.prototype.printInfo = function () {
//Car.prototype is registering this function in unnamed objecrt
console.log( name:${this.name} price: ${this.price});
};
//console.log(Car.prototype); ///now we have added an function in the unnamed object that is from line no.10 to 12 Output of line no.13:{ printInfo: [Function (anonymous)] }
//now we want to try to call this function with the help of our object
//alto.printInfo();
Car.prototype.greeet = () => {
console.log(“greet to india from my depth of heart”);
}; //Car.prototype is registering this function in unnamed objecrt
//now we are calling these two function
alto.proto.greet = () => {
console.log(“happy sunday”);
};
alto.printInfo();
alto.greeet();
alto.greet();
Bmw.greet();
if (Car.prototype == alto.proto) {
console.log(“yes they are same it’s for unnamed object”);
} ///car.prototype and alto(it is an object).proto both are refering same thing to unnamed object
if (Car.prototype.constructor == alto.proto.constructor) {
console.log(“yes they are same it’s for function”);
} // as we know that constructor is a unnamed object property that’s why it’s referring to the function so it’s showing same in output.
Prototype Chaining:
The prototype chain is a mechanism that allows objects to inherit properties and methods from other objects. Every object can have exactly one prototype object. That prototype object can also have a prototype object, and so on, creating a chain of inheritied properties and methods. The end of this chain is called the null prototype.
1 Like
wow… After seeing this notes i feel just harshit sir video recording is playing. that’s really good notes… 
2 Likes