• Thursday , 22 August 2019

Prototype in JavaScript

Code Canyon



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

3d Ocean

Related Posts

23 Comments

  1. Klein LiZ
    July 9, 2019 at 13:48

    Quick and easily explained, thank you so much!!

  2. ExcelDemy.com
    July 9, 2019 at 13:48

    Thanks for the nice and brief explanation 🙂

  3. Karthick Rajendran
    July 9, 2019 at 13:48

    Thanks… Finally I understood this concept. Short and sweet explanation.

  4. Beatrix Ducz
    July 9, 2019 at 13:48

    Why don't we simply do e1.name?

  5. Suhas Nayak
    July 9, 2019 at 13:48

    //Say user-1 did this
    const product1=new Object({
    name: 'user-1'
    })
    Object.prototype.hasOwnProperty=()=>'This is the new function'
    console.log(product1.hasOwnProperty(name))// o/p: This is the new function

    //Say user-2 did this
    const product2=new Object({
    name: 'user-2'
    })
    console.log(product2.hasOwnProperty(name))// o/p: This is the new function

    Doubt #1
    Ideally user-1 shouldn't have been allowed to add new property to Object object's prototype right ? Because in above example when user-2 wanted to check whether 'name' property exists he is getting different o/p which was set by user-1!!!

    Doubt #2
    product1.prototype.hasOwnProperty=()=>'This is the new function'
    Why is this not allowed ? product1 is an instance of Object, so it is also an object, so even it should have [[Prototype]] property!

    TIA.

    TIA

  6. Sethu Raja
    July 9, 2019 at 13:48

    WONDERFUL AND CLEAR EXPLANATION EVER !!!!

  7. Terje Solem
    July 9, 2019 at 13:48

    not to be confused with prototype.js which is a standalone js library and not a part of js "internals"

  8. SSchithFoo
    July 9, 2019 at 13:48

    Finally a video addressing why instead of how.

  9. Nagi Reddy
    July 9, 2019 at 13:48

    Justified why Javascipt is OOP language!!!. Can't find anything better

  10. Dev. SheNNawY
    July 9, 2019 at 13:48

    Awesome tutorial, thanks a lot

  11. T Tone
    July 9, 2019 at 13:48

    Thank you this simple video helped me so much

  12. jaihind
    July 9, 2019 at 13:48

    Why its working when Employee.prototype.getName() is defined? And why not when only defining Employee.getName() ?

  13. Captain DA40
    July 9, 2019 at 13:48

    Nice stuff, as always with this presenter.

  14. B Sai Yaswanth Reddy
    July 9, 2019 at 13:48

    Thank you. 🙂

  15. korbybagoli
    July 9, 2019 at 13:48

    Concise and clear. Thanks!

  16. Michael Reis
    July 9, 2019 at 13:48

    Nice! Very useful.

  17. Gabriel
    July 9, 2019 at 13:48

    This is just a perfect tutorial

  18. Denis Bolomier
    July 9, 2019 at 13:48

    Thx !

  19. Scorpion Venomm
    July 9, 2019 at 13:48

    Perfectly explained 🙂

  20. Mohamed farook
    July 9, 2019 at 13:48

    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.

  21. Reshmi D
    July 9, 2019 at 13:48

    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.

  22. ramesh bogandla
    July 9, 2019 at 13:48

    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

  23. WestBE
    July 9, 2019 at 13:48

    Thank you, very clear

Leave A Comment

You must be logged in to post a comment.