PROTOTYPE in JAVASCRIPT

prototype.md

PROTOTYPE IN JS. 😄

By default every function has a property name as prototype which is EMPTY (by default). We can add properties and methods to it.

Note: Every function is a contructor function in JS.

Let's say we have an function x and create an object x of x as x1 will inherite the prototype of x.

var x = function(j) {
	this.i = 0;
	this.j = j;
  
  this.GetJ =  function() {
  	return this.j;
  }
}

var x1 = new x(2);

console.log(x1); 
  // > x {i: 0, j: 2, GetJ: ƒ}
 
console.log(x1.GetJ());
  // > 2

Note:When it comes to constructor functions this does not refer to the function which contains it, but it refers to the objects that will be created by the constructor functions.

Now I can create as my object I want and every object created from x will have a GetJ() method attached to it which is kind on bad. The solution to this is Prototype.

So we take the GetJ() method and it to the prototype of x.

var x = function(j) {
	this.i = 0;
	this.j = j;
}

x.prototype.GetJ =  function() {
  	return this.j;
 }

var x1 = new x(2);

console.log(x1); 
  // > x {i: 0, j: 2}
 
console.log(x1.GetJ());
  // > 2

But we still get the correct output as it behaves the same as before the only diffrenece is that x1 does not have its own GetJ() method. So it looks up in the prototype chain (in it's parent) and finds the method GetJ().

Note: Prototype Chain: So every function in Javascript is created from a Master Object.

Here x -> Function -> Object So if we call a method from x, If that perticular function is not in x it will look up and up until it finds it in the
chain of prototype of if the function does not exist in the chain it will display undefined.

For E.g.

var x = function() {
}

console.dir(x);

So we can the whole Prototype Chain. Here if I call

console.log(x.toString());
// > function() {
// >
// >  }

Here x does not have toString() method but it goes up and finds it in the prototype chain.

Prototypes in Depth

As we know Javascipt does not have a Class defination as Java. Here i will show you How to create Subclass from a Baseclass.

//Baseclass
var Bookshop = function() {
	this.cost = 100;
}

Bookshop.prototype.bill = function() {
	console.log('Your Bill is: $'+ this.cost);
}

Here Bookshop is our baseclass with a method bill() in it's prototype.

//Subclass
var BuyBook = function(title,cost) {
	Bookshop.call(this); // Statement 1
  
  this.title = title;
  if(cost) 
	  this.cost = cost ;
}

BuyBook.prototype = Object.create(Bookshop.prototype); // Statement 2
BuyBook.prototype.constructor = BuyBook; // Statement 3

Now I have a Subclass BuyBook of baseclass of Bookshop.

Explaination

• Statement 1 : Bookshop.call(this);. This line call the constructor and sets the this value. So in BuyBook : this = { this.cost = 100; }.

• Statement 2 : BuyBook.prototype = Object.create(Bookshop.prototype);. This line helps to inherites from Bookshop.prototype.

• Statement 3 : BuyBook.prototype.constructor = BuyBook;. This line is setting the constructor for BuyBook i.e the BuyBook Method.

var person_1 = new BuyBook('GOT', 200);
var person_2 = new BuyBook('Harry Potter');

person_1.bill();
//> Your Bill is: $200
person_2.bill();
//> Your Bill is: $100

This is how we can call performs inheritance. You can also overwrite the bill() method by defined a new method in BuyBook.prototype.bill = function() { }.

😄