Prototype in JavaScript

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

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)
{
}

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)
{

{
}
}

var e1 = new Employee("Mark");
var e2 = new Employee("Sara");

Output :

function Employee(name)
{
}

var e1 = new Employee("Mark");

{
}

var e2 = new Employee("Sara");

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)
{
}

{
}

var e1 = new Employee("Mark");
var e2 = new Employee("Sara");

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)
{
}

{
}

var e1 = new Employee("Mark");
var e2 = new Employee("Sara");

Output :

[SSchithFoo]

Finally a video addressing why instead of how.

[sethuraja]

WONDERFUL AND CLEAR EXPLANATION EVER !!!!

[reshmid]

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.

[KleinLiZ]

Quick and easily explained, thank you so much!!

[Karthickra]

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

[ttone]

Thank you this simple video helped me so much

[captainda]

Nice stuff, as always with this presenter.

[orvinwelchez]

Thank you so much for this short but clear explanation 🤗

[byron_glover]

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?

[ultrahot]

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

[vishalsingh-pgem]

why Employee.getName when accessed via individual instance gives error ?

[neighbor]

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

[terjes]

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

[suhasnayak]

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

//Say user-2 did this
const product2=new Object({
name: 'user-2'
})
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
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