Introduction:

In continuation to our previous article Object Prototype, where we got understanding of object prototype in Javascript and also knew How can we use it to implement Prototypal inheritance. This article will cover the concept of Function Prototype in Javascript. So, Let us get started.

What is Function Prototype:

When a function is declared/defined in Javascript it also creates a property named prototype with that function. This property is referred as Function Prototype. This property is used to set the [[Prototype]] across instances created (constructor function syntax) of this function. Function prototype can be accessed using function name followed by prototype i.e. F.prototype.

By default, the value of F.prototype is an object i.e. constructor of function, which points back to function itself. We can completely change the value of F.prototype by assigning a new object. Make sure it is not a single data otherwise it will be ignored while assigning it to [[Prototype]].

Whenever a new object is created using new Func(), it automatically assign F.prototype to [[Prototype]] of object created.

By the books,

"Function's prototype is the object instance that will become the prototype for all objects created using this function as a constructor"

It is also true that the changes which are done in F.prototype would not affect the existing object's [[Prototype]]. That means, F.prototype and object's [[Prototype]] have different references. Simply, it set the [[Prototype]] of object created and forget it. Let us have a look.

Get it Worked:

Lets get things worked by considering our Previous Example of Printer object.

  1. var epson_printer = {
  2. brand:"EPSON",
  3. print: function(){
  4. console.log('It prints');
  5. }
  6. }
  7.  
  8. function LaserPrinter(name){
  9. this.isLaser = true;
  10. this.name = name;
  11. }
  12.  
  13. console.log(LaserPrinter.prototype) //should log {constructor: ƒ}
  14.  
  15. console.log(LaserPrinter.prototype.constructor);
  16. /*
  17. should log
  18. ƒ LaserPrinter(name){
  19. this.isLaser = true;
  20. this.name = name;
  21. }
  22. */
  23.  
  24. LaserPrinter.prototype = epson_printer; //assigning F.prototype
  25.  
  26.  
  27.  
  28. var laserEpsonPrinter = new LaserPrinter("Printer1"); //it will assign [[Prototype]] too.
  29.  
  30. laserEpsonPrinter.print(); //print function should be accessible.

Now, Let us create another Printer star_printer object, update LaserPrinter.prototype.

  1. var star_printer = {
  2. brand: "STAR",
  3. print: function(){
  4. console.log("Star prints !!");
  5. }
  6. }
  7. //update prototype of LaserPrinter function
  8. LaserPrinter.prototype = star_printer;
  9.  
  10. var laserStarPrinter = new LaserPrinter("Printer2"); //creating another object.
  11.  
  12. laserStarPrinter.print(); //logs "Star prints !!"
  13.  
  14. laserEpsonPrinter.print(); //it still logs "It prints"

Conclusion:

In this article we learnt about function prototype. Function Prototype is accessed using F.prototype. It sets [[Prototype]] of objects created using new Func().

Good Bye 👋 !! until I write again. Code well, Cook good.