Easy Step to Understand Function Prototype in JavaScript

Function Prototype in Javascript

It is usually difficult to understand and it has a lot of terminologies. When we try to understand everything it may lead to confusion and us losing interest in the topic, especially as beginners. So, in this article, we will learn why and how to function prototype in Javascript. Let’s see the sample example:

Ex:

function Person(fName, lName){
this.firstName = fName;
this.lastName = lName;
}

const person1 = new Person('Wonder', 'Develop')

person1.getfullName = function(){
return this.firstName + ' ' + this.lastName
}

console.log(person1.getfullName());

Output:

function prototype in javascript

 

 

  • In the above code, we have defined a function called ‘Person()’ and it has two parameters called (fName, lName).
  • Within the Person() function, we have assigned ‘this.firstName’ to ‘fName’ and ‘this.lastName’ to ‘lName’.
  • We can create instances of ‘this.person’ using the ‘new’ keyword. So, we created a constant called ‘person1’ and assigned a “new Person(‘Wonder’, ‘Develop’)”. The function that is used with the ‘new’ keyword is called a constructor function.
  • As we already know Javascript is a dynamic language. So it allows us to attach new properties to an object at any given time. So on person1, we can attach person1 .getfullName is going to be equal to a function that returns ‘this.firstName’ followed by ‘this.lastName’.
  • Then we log the person1.getfullName to the console.
  • See the above output, we got Wonder Develop

Now, what if we wanted to attach a property or method that should be applied to every Person() function? In our above example, getfullName is a function that benefits us by being available in all instances of the Person() function since it is generic. It is not specific to just constant person1, it won’t work on any variables.

READ ALSO  Why I Strongly Recommend using Triple Equals in JavaScript

Prototype

Where the prototype comes into the picture. In JavaScript, every function has a property called prototype that points to an object. We can make use of that prototype object to determine all our shareable properties.

Let’s change some pieces of code instead of person1.getfullName we change it to the Person() function.prototype.getfullName

Prototype function

function Person(fName, lName){
  this.firstName = fName; 
  this.lastName = lName; 
}
// prototype function
Person.prototype.getfullName = function(){
return this.firstName + ' ' + this.lastName
}

Now, we can create more persons i.e person1, person2, person3,.. and we can log it (person1.geFullName()). See the below, example we have created two more constant persons and log it.

const person1 = new Person('Wonder', 'Develop')
const person2 = new Person('Keep', 'Support')

console.log(person1.getfullName());
console.log(person2.getfullName());

Output:

function prototype in javascript

 

In the above prototype function code, we have defined the getfullName() function once but it is available on every instance of the Person() function.

Leave a Reply