Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/02/prototype-in-javascript.html
In this video we will discuss Prototype object in JavaScript. Let us understand it’s use with an example.
The following Employee constructor function constructs Employee object.
function Employee(name)
{
this.name = name;
}
There are several ways to add a function to the Employee object. One way is as shown below. This works but the problem with this approach is that, if you create 100 employee objects there will be 100 copies of getName() function. We don’t want to be creating copies of functions, instead we want all the objects to share the same function code. This can be achieved using JavaScript prototype object.
function Employee(name)
{
this.name = name;
this.getName = function ()
{
return this.name;
}
}
var e1 = new Employee(“Mark”);
var e2 = new Employee(“Sara”);
document.write(“e1.name = ” + e1.getName() + “[br/]”);
document.write(“e2.name = ” + e2.getName() + “[br/]”);
Output :
e1.name = Mark
e2.name = Sara
In this example, getName() function is added just to e1 object, and not to e2 object. So e2.getName() would throw an undefined error.
function Employee(name)
{
this.name = name;
}
var e1 = new Employee(“Mark”);
e1.getName = function ()
{
return this.name;
}
var e2 = new Employee(“Sara”);
document.write(“e1.name = ” + e1.getName() + “[br/]”);
document.write(“e2.name = ” + e2.getName() + “[br/]”);
In the following example getName() function is added to the Employee object using the name of the constructor function. This would also result in undefined error.
function Employee(name)
{
this.name = name;
}
Employee.getName = function ()
{
return this.name;
}
var e1 = new Employee(“Mark”);
var e2 = new Employee(“Sara”);
document.write(“e1.name = ” + e1.getName() + “[br/]”);
document.write(“e2.name = ” + e2.getName() + “[br/]”);
Using the prototype object to add functions : The following are the advantages of using the prototype object to add functions.
1. No matter how many objects you create, functions are loaded only once into memory
2. Allows you to override functions if required.
function Employee(name)
{
this.name = name;
}
Employee.prototype.getName = function ()
{
return this.name;
}
var e1 = new Employee(“Mark”);
var e2 = new Employee(“Sara”);
document.write(“e1.name = ” + e1.getName() + “[br/]”);
document.write(“e2.name = ” + e2.getName() + “[br/]”);
Output :
e1.name = Mark
e2.name = Sara
Original source
21 responses to “Prototype in JavaScript”
Thank you this simple video helped me so much
Why its working when Employee.prototype.getName() is defined? And why not when only defining Employee.getName() ?
What about this approach ?
function Employee (name) {
this.name = name;
}
function getName () {
return this.name;
}
var E1 = new Employee('a');
var E2 = new Employee('b');
console.log(getName.call(E1));
console.log(getName.call(E2));
Nice stuff, as always with this presenter.
Thank you. ๐
Concise and clear. Thanks!
Nice! Very useful.
This is just a perfect tutorial
Thx !
Perfectly explained ๐
My question is, If you doesn't use "employee.prototype.getName" will get same result. Can you tell me clearly you do we want to use that code and advantage of the prototype.
Recently saw your video tutorial for Javascript. Excellent video tutorials. Now going through Angular JS tutorial. Thanks for sharing the tutorials in such a nice way. Finally got some good tutorial.
in first approch we create two employee objects like e1,e2 but one get method is thier for returning name , get method is shared one function
Thank you, very clear
this is var in private version? thanks
Thanks for posting this video, very helpful. Do you mind elaborating on why the third method for creating the function would not be a viable option? I didn't quite grasp why it worked by associating the function to the prototype property as opposed to the constructor function itself?
THANK YOU
finally !, pure gold, thank you !
Nice Video :). Thank you!!
nice video ๐
thank u sir..!