All about JavaScript Prototype.. Evolution of new, this and class keyword in JavaScript….
JavaScript is a prototype based language. Another way JavaScript is a functional programming language and function is itself an object. The thing that I am trying to clear is, you can not think almost anything in JavaScript without object. Prototype concept is related to JavaScript Object. After Object , prototype is the most important thing to know in JavaScript if you want to feel love for for it.
Let’s do some programming. We will learn prototype later😁.
const person={
name:"Rayhan",
age:10,
height: 5
}const student = Object.create(person);
console.log(student) //{}console.log(student.name) //Rayhan
What have we done ? 😦 Very simple. We have created an object called “person”. Then we have created an another object called “student” by “Object.create()” method with the help of “person” object. So we can say that “student” is a child object of “person”. Then we did “console.log(student.name)” and we have got output which is a property of “person” object! 😮😮. How?🤔 We have created an object called student where we didn’t define any property . So, “student” should be an empty object. Then how can we get property of it? 🤔 The answer is this has been possible because of prototype. I mean accessing the property of parents from the child has been possible by prototype . This is a simple concept of prototype.
Let’s see some more examples :
const methodOfProgrammer={
coding(){
console.log("I am coding")},
debugging(){
console.log("I am Debugging problem")},
sleep(){
console.log("Problem is solved. Sleeping")},
}function Programmer(name,programmingLanguage){
let programmer = Object.create(methodOfProgrammer);
programmer.name=name;
programmer.age=age;
return programmer;
}const kabir = Programmer("Kabir","JavaScript");
kabir.coding() // I am coding
“Prototype is a property of a function that points an object.”
In that case we have used an external object for methods in the function “programmer”. Now we want to use the methods from the function “programmer”, not from an external sources. To do that we will take the help of prototype property of the programmer function. Let’s do it:
function Programmer(name,programmingLanguage){
let programmer = Object.create(programmer.prototype);
programmer.name=name;
programmer.age=age;
return programmer;
}
Programmer.prototype={
coding(){
console.log("I am coding")},
debugging(){
console.log("I am Debugging problem")},
sleep(){
console.log("Problem is solved. Sleeping")},
}const kabir = Programmer("Kabir","JavaScript");const sabbir = Programmer("Sabbir","python");
kabir.coding(); // I am coding
Boom! Woo! this is working😀!
What does it mean? It means that “Programmer” is a function which has a property called prototype that points an object and by prototype , a child can access the property of its parent. This inheritance of parent property to its child in JavaScript has been possible by prototype concept but in other languages this work is done by “class”. For this reason JavaScript is different from other language.
This is the end of what prototype is. Now we will explore more about prototype.
So far we have learnt following things:
- “Programmer” is a constructor function because by that we have created objects . As it has constructed object, for this reason it is a constructor. In JavaScript all functions are constructor. By convention the name of a constructor function should be stated with capital letter.
- How we can add method in the prototype of a constructor function.
- How we can take the property of parent in child by Object.create() method
What we have done finally? We have shared the common methods of constructor function by prototype in the instances of that constructor function like “kabir”, “sabbir” .
Let’s make it more simple my “new” keyword :
function Programmer(name,programmingLanguage){
let programmer = Object.create(programmer.prototype);
programmer.name=name;
programmer.age=age;
return programmer;
}
Programmer.prototype={
coding(){
console.log("I am coding")},
debugging(){
console.log("I am Debugging problem")},
sleep(){
console.log("Problem is solved. Sleeping")},
}const kabir = Programmer("Kabir","JavaScript");
const sabbir = Programmer("Sabbir","python");
kabir.coding(); // I am coding--------------------------------------------------------------------
function Programmer(name,programmingLanguage){
this.name=name;
this.age=age;
}
Programmer.prototype={
coding(){
console.log("I am coding")},
debugging(){
console.log("I am Debugging problem")},
sleep(){
console.log("Problem is solved. Sleeping")},
}const kabir = new Programmer("Kabir","JavaScript");
const sabbir = new Programmer("Sabbir","python");
kabir.coding(); // I am coding
Have you noticed anything different in the second example?? 🤔🤔
Notice we have omitted two lines from "Programmer" constructor function.
When we use "new" keyword JavaScript itself create a this object by
"let this = Object.create(programmer.prototype);"
in stead of
"let programmer = Object.create(programmer.prototype);"And Return
"return this;"
instead of
"return programmer;"
Hasn’t it made your life easier?…..
Now let’s know the “class” keyword which was introduced in 2016 by ES6. If we use “class” keyword then we can omit “ Programmer.prototype” part also with having the same functionality. Let’s do it:
function Programmer(name,programmingLanguage){
this.name=name;
this.age=age;
}
Programmer.prototype={
coding(){
console.log("I am coding")},
debugging(){
console.log("I am Debugging problem")},
sleep(){
console.log("Problem is solved. Sleeping")},
}const kabir = new Programmer("Kabir","JavaScript");
const sabbir = new Programmer("Sabbir","python");
kabir.coding(); // I am coding
--------------------------------------------------------------------class Programmer{
constructor(name,age){
this.name=name;
this.age=age;
}coding(){
console.log("I am coding")
}
debugging(){
console.log("I am Debugging problem")
}
sleep(){
console.log("Problem is solved. Sleeping")
}
}
const kabir = new Programmer("Kabir","JavaScript");
const sabbir = new Programmer("Sabbir","python");
kabir.coding(); // I am coding
Woo! Now have completed a great journey. From prototype to class. That’s all for today about prototype.
Oh! Wait. Did you ever think, “Array” is also a function ( don’t be confused . Function is also an Object in JavaScript 😀)which has a property called prototype where push , pop, filter , map etc methods are defined and the array we define in day to day life is nothing but the child of “Array” function? For this reason we can use push, pop, map methods in our day to day life defining array. Confused? 🤔 Can you please open your code editor and do “console.log(Array.prototype)”? Let me know what you see……
Thank You………