Prototypes In JavaScript

• Simply Prototypes means methods / feature which are inherited by a datatype.
  For Ex: you see methods which are always available when manipulating arrays, objects, string etc.
  Like: arr.reverse( )

• These functions ( or typically called methods ) is not written by the user using it. They directly use it without defining.

• You might think these are written default in JavaScript language, but here you are wrong.
  These are written by the browser developers ( Yes, different browser have different developers who write these methods ).

• So there is a chance that you may find a method in Chrome but its unavailable in Firefox or Edge or any other browser. But the chances are very low as these are most used browser and they have active developers developing them.

Where can you find

Browsers not supporting latest methods:

• Their are several browsers which which are not being maintained and hence does not support latest methods.

Ex: Internet Explorer, HotJava
These browser does not support methods like .find .findIndex.

What error to expect when a browser does not support a method / function

•         arr.map()
          VM300:1 Uncaught TypeError: arr.map is not a function
              at <anonymous>:1:5
  

• You will get error : TypeError : <variable>.<method> is not a function.

• To deal with these errors Polyfills are made ( We will not cover Polyfills here )

Where to find Prototypes:

• Every function in JavaScript has a prototype property. This property is an object which is treated as an blueprint to create instances of the function. This object is common to every other similar function which will be created.

• Methods and properties can be accessed via: functionName.prototype, This is inherited by all function which will be created in the JavaScript.

• You can see (Fig - 1.1) all the functions (methods) available to the Array in JavaScript are present in prototype of Array.

• 

  The [[prototype]] of a function (means function.prototype.prototype ) always refers to the the prototype of Object.

How Prototypes are defined for user defined methods / functions:

• When a function or let or const etc… is defined by the user, the prototype of its parent is inherited.
  ( It means the prototype of its parent is copied to the function )

• where is it copied? In <method>.__proto__
  ( Inside working: when the function is created <method>.__proto__ = <Parent>.prototype )

• 

Browser working:

• When a method is called, browser check first for user defined function. If it doesnot find the function then it does to list of methods in prototype and call it if present.

• 

Chaining Prototypes:

• Suppose you make define two class, say A and B and B extends A.
  So now you will be able to use the function / methods defined in A with the child of B.

• What actually happens when you define B extends A

class A{
    constructor(name){
        console.log(`Your A name is ${name}`);

    }

    hello() {
        console.log(`Hello from A`)
    }
}
class B {
    constructor(name){ 
        console.log(`Your B name is ${name}`);

    }

    hey() {
        console.log(`HeY from B`)
    }
}
5
const temp = {}
temp.__proto__ = B.prototype
temp.__proto__.__proto__ = A.prototype

temp.hey()          //output: HeY from B
temp.hello()        //output: Hello from A

Summary

Prototypes are saviour for developers.