Home/ Questions/Q 8886

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-28T05:18:07+00:00

Prototype and Prototypal Inheritance in Javascript

  • 60k

Prototype
https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu50hibcoium896ozuw1.png

The prototype is an object that is associated with every functions and objects by default in JavaScript.

Whenever we create a function , object or array javacript by default attaches a prototype object to it which contains some additional methods inside it.

https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8h8byft71o1wpex5q7ec.png

All JavaScript objects inherit properties and methods from a prototype:

  • Date objects inherit from Date.prototype.
  • Array objects inherit from Array.prototype.
  • Player objects inherit from Player.prototype.
  • The Object.prototype is on top of the prototype inheritance chain. Date objects, Array objects, and Player objects all inherit from Object.prototype. The Prototype Chain Prototypal inheritance uses the concept of prototype chaining.

Every object created contains [[Prototype]], which points either to another object or null.

Example:- An object C with a [[Prototype]] property that points to object B. Object B’s [[Prototype]] property points to prototype object A. This continues onward, forming a kind of chain called the prototype chain.
Prototypal Inheritance 

let animal = {   eats: true    walk() {     console.log("Animal walk");   } };  let rabbit = {   jumps: true   __proto__ = animal; };   // we can find both properties in rabbit now: console.log(rabbit.eats ); // true  rabbit.walk(); // Animal walk
Enter fullscreen mode Exit fullscreen mode 

const obj = {   firstName: "Neeraj",   lastName: "Kumar",   getFullName: function () {     return this.firstName + " " + this.lastName;   } };  const obj2 = {   firstName: "Er Neeraj",   __proto__: obj };  console.log(obj2.getFullName()); //Er Neeraj Kumar
Enter fullscreen mode Exit fullscreen mode

Creating own prototype
Creating Ployfill for bind method 

const obj = {   firstName: "Neeraj",   lastName: "Kumar" };  function getFullName(state) {   return this.firstName + " " + this.lastName + " " + state; }  const fName = getFullName.bind(obj, "Yadav"); console.log(fName()); //Neeraj Kumar Yadav  Function.prototype.myBind = function (...args) {   const func = this;   const params = args.slice(1);   return function () {     return func.apply(args[0], params);   }; };  const fName2 = getFullName.myBind(obj, "Roy"); console.log(fName2()); //Neeraj Kumar Roy
Enter fullscreen mode Exit fullscreen mode

Creating Ployfill for Call, Apply and Bind method 

const obj = {   firstName: "Neeraj",   lastName: "Kumar" };  function getFullName(state) {   return this.firstName + " " + this.lastName + " " + state; }  Function.prototype.myBind = function (obj, ...args) {   obj.func = this;   return () => {     return obj.func(...args);   }; };  Function.prototype.myCall = function (obj, ...args) {   obj.func = this;   return obj.func(...args); };  Function.prototype.myApply = function (obj, args) {   obj.func = this;   return obj.func(...args); };  const fName2 = getFullName.myBind(obj, "Yadav"); console.log(fName2()); //Neeraj Kumar Yadav  console.log(getFullName.myCall(obj, "Roy"));  //Neeraj Kumar Roy  console.log(getFullName.myApply(obj, ["Sonu"]));  //Neeraj Kumar Sonu
Enter fullscreen mode Exit fullscreen mode

beginnersjavascriptwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,