Explanation of Prototype in JavaScript

Explanation of Prototype in JavaScript

Hello everyone, in this article we are going to talk about Javascript prototypes. In this article we are also talk about Javascript objects and constructors with examples.

Let's get started.

What is prototype
All objects in Javascript have their own prototypes. When an object initialized, instance took all properties and methods from object prototype. We can access the prototype via ObjectName.prototype.

Below you can see a code block of prototype usage.

function User() {
    this.name = "Burak Hamdi" ;
    this.surname = "Tufan";
}
var u = new User();
console.log(u.name);
console.log(u.surname);

User.prototype.web = "thecodeprogram.com";
console.log(u.web);

User.prototype.showFullname = function() {
  return this.name + " " + this.surname; 
}
console.log(u.showFullname());
Example output will be like below: JavaScript simple Prototype example output

All built-in classes in Javascript took their own properties and methods from their own prototypes.

We can also create objects with initial values. We are going to use Constructor to initialize an object with initial values.

Below you can see a java script code block of constructor with initial values.

function User(_name, _surname, _web) {
    this.name = _name;
    this.surname = _surname;
    this.web = _web;
}
var u = new User("Burak Hamdi", "TUFAN", "thecodeprogram.com");
console.log(u.name);
console.log(u.surname);
console.log(u.web);

User.prototype.showFullname = function() {
  return this.name + " " + this.surname; 
}
console.log(u.showFullname());

User.prototype.showFullData = function() {
  return "\nFull Data of object : \n" + this.name + " \n" + this.surname + " \n" + this.web; 
}
console.log(u.showFullData());
Below image you can see the example output: JavaScript Prototype with constructor example output
What have we done above
  • We created a an object with constructor with both initial values and no initial values.
  • Then we created an instance of this object.
  • We accessed the object data.
  • We added new properties and methods to instance
  • Last we accessed these last added members.

There is an important detail that you need to remember that adding the members to instance of classes will not change the original class and other initialized instances. Only adding members to classes via prototypes will affect all created instances.

Below you will see the example code block:

function User(_name, _surname) {
    this.name = _name;
    this.surname = _surname;
}
var u1 = new User("Burak Hamdi", "TUFAN");
var u2 = new User("John", "DOE");

u1.web = "thecodeprogram.com";
u2.language = "Javascript";

//first whow data that exist in u1 and not exist in u2 and viseverse
console.log(u1.web)
console.log(u2.web)
console.log(u1.language)
console.log(u2.language)

User.prototype.showFullname = function() {
  return this.name + " " + this.surname; 
}

//If you call showFullname method before prototype, it will throw error on function not exist
console.log(u1.showFullname());
console.log(u2.showFullname());
Below image you can see the example output. JavaScript Prototype adding members to instances and original class example output
As a result:
  • We can create objects with properties and methods. We can add members after initializing them.
  • We can create instances of objects and we can add members to these instances individually from original objects.
  • We can add members to original objects with prototype keyword programmatically.
  • We can customize the objects with prototype keyword.

That is all in this article.

Have a good prototyping.

Burak Hamdi TUFAN


Tags


Share this Post

Send with Whatsapp

Post a Comment

Success! Your comment sent to post. It will be showed after confirmation.
Error! There was an error sending your comment. Check your inputs!!!

Comments

  • There is no comment. Be the owner of first comment...