I admit that despite 'prototype' property of function object is a relatively simpler topic (I concluded this after a lot of self research and discussions with my colleagues), its initial encounters created a state of confusion in my mind.
Therefore I decided to dedicate today's blog topic to it, so that I may help someone, who too might be struggling to understand- Where does prototype come from and what is its purpose?
All that I knew about "prototype", when I started to code in javascript, was that "prototype allows us to add properties and methods to an object".
There were a lot of confusions and queries in my mind. One such query was that "I can anytime add a property to a function object without using this prototype!!! then why this prototype Property?" i.e. I can write:
Therefore I decided to dedicate today's blog topic to it, so that I may help someone, who too might be struggling to understand- Where does prototype come from and what is its purpose?
All that I knew about "prototype", when I started to code in javascript, was that "prototype allows us to add properties and methods to an object".
There were a lot of confusions and queries in my mind. One such query was that "I can anytime add a property to a function object without using this prototype!!! then why this prototype Property?" i.e. I can write:
myObject.name="someName";
and this would add property "name" to "myObject".
Now comes the question "What will be prototype doing while adding properties to function?"
Have patience.. we will come to this question later on.
For the moment lets try to find out the answer of the question -"Where does this prototype come from?"
Oh... hold on.... before digging any further over this topic, one thing which should be clear is that-
Now comes the question "What will be prototype doing while adding properties to function?"
Have patience.. we will come to this question later on.
For the moment lets try to find out the answer of the question -"Where does this prototype come from?"
Oh... hold on.... before digging any further over this topic, one thing which should be clear is that-
In Javascript, functions are first class objects, i.e. they can be manipulated and passed around like any other object. To be more precise, every function is actually a Function Object.
You can explore more about the function object and constructor on mozilla developers network.
Now another important thing that you should be aware of is that "functions in javascript, being an object can contain methods and properties."
There are certain common methods like "apply()", "call()" which a function object contains. Besides of the mentioned methods, there are some common properties like "length", "constructor", "prototype" etc is also contained by a function object. Let us check them out.
Write a general function in firebug console (i prefer firebug, you can use notepad also):
Now another important thing that you should be aware of is that "functions in javascript, being an object can contain methods and properties."
There are certain common methods like "apply()", "call()" which a function object contains. Besides of the mentioned methods, there are some common properties like "length", "constructor", "prototype" etc is also contained by a function object. Let us check them out.
Write a general function in firebug console (i prefer firebug, you can use notepad also):
function test(a,b) {
return a*b;
}
console.log(test.length); // writes 2 on console
console.log(test.constructor); //writes function() on console
return a*b;
}
console.log(test.length); // writes 2 on console
console.log(test.constructor); //writes function() on console
Lets talk about the main concern of this topic "prototype". Check what do you get on console, when you write following piece of code:
console.log(test.prototype);
It will return an empty object " { } ".
Find out what does this return:
console.log( typeof test.prototype);
it returns [object Object]
I hope now you have a clear idea of answer of the first question: "Where does this prototype come from?"
Basically when you create a function, "prototype" property gets created with it. This "prototype" property gets initialized to an empty object.
Again an interesting point to notice here is that since prototype is an object (empty initially), we can add properties and methods to it, same as we do with other javascript objects.
Remember built in JavaScript functions do not have this prototype property.
Let us come to my first question now: "What will be prototype doing while adding properties to function?". To get a more clear concept on this, see the below example.
Basically when you create a function, "prototype" property gets created with it. This "prototype" property gets initialized to an empty object.
Again an interesting point to notice here is that since prototype is an object (empty initially), we can add properties and methods to it, same as we do with other javascript objects.
Remember built in JavaScript functions do not have this prototype property.
Let us come to my first question now: "What will be prototype doing while adding properties to function?". To get a more clear concept on this, see the below example.
function Person(name) {
this.name = name;
}
Person.prototype.age = 45;
Person.hobby = "painting";
var person1 = new Person("George");
console.log(person1.name);/*prints "George" on console*/
console.log(person1.age);/*prints "45" on console*/
console.log(person1.hobby);/*prints "undefined" on console*/
var person2 = new Person("Nick");
console.log(person2.name);/*prints "Nick" on console*/
console.log(person2.age);/*prints "45" on console*/
console.log(person2.hobby);/*prints "undefined" on console*/
this.name = name;
}
Person.prototype.age = 45;
Person.hobby = "painting";
var person1 = new Person("George");
console.log(person1.name);/*prints "George" on console*/
console.log(person1.age);/*prints "45" on console*/
console.log(person1.hobby);/*prints "undefined" on console*/
var person2 = new Person("Nick");
console.log(person2.name);/*prints "Nick" on console*/
console.log(person2.age);/*prints "45" on console*/
console.log(person2.hobby);/*prints "undefined" on console*/
In the above example "person1" and "person2" are instances of Function Constructor "Person". "age" is available to both the instances of "Person" whereas "hobby" is not available to any one them.
Now you know:
The prototype property is used primarily for inheritance. You can add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.
I hope my effort to describe the prototype might have helped you.
Prototypes in javascript is a bigger topic, I will write more on this topic on my next blog.....
Now you know:
The prototype property is used primarily for inheritance. You can add methods and properties on a function’s prototype property to make those methods and properties available to instances of that function.
I hope my effort to describe the prototype might have helped you.
Prototypes in javascript is a bigger topic, I will write more on this topic on my next blog.....