prototype and constructor in javascript.

#native_company# #native_desc#

#native_cta#

This site is best viewed in a modern browser with JavaScript enabled.

prototype and constructor in javascript.

21stnomad

Hello developers

This is Sri.
i am having a hard time in understanding Prototype and Constructor in Javascript.

Can anyone please clarify my doubts.

What does mean by Prototype in Javascript?
What is Constructor?
what are the uses of Prototype and Constructor JS?
why do we use Prototype and constructor in JS?

[/B]

Thanks in advance.

tech_soul8

I'm not an expert, I'm still learning but I'll try to explain it to you and if I'm wrong let someone correct me.

JavaScript is an Object based language. So you have objects like String, Array, Number, Math... All this objects have some properties and methods you can use.
But what if you want to build one of your own? Let's say you are building an application for some car shop. You want to be able to add buyer's details like for example:

his/hers name and surname
his/hers city/street address
car model
car price
car color

etc...

JavaScript obviously doesn't come with an object that let's you do that (actually you can do it on number of different ways but pretend that you can't).

So you may define a reference type which we'll call simple "CustomerDetails()". What are reference types? Reference types are simply templates for your objects as arhitect's drawings are templates used to build a house. One thing to note here is that some developers refer to reference types as classes and use this two terms interchangeably. While this is correct for object-oriented languages such as C#, C++, Java... this is not correct for JavaScript as JavaScript has no formal class construct although it has support for reference types (logical equivalent to classes).

A reference type consist of three things:

A constructor
Method definitions
Properties

How do you define it?

function CustomerDetails() {}

At first this may look like the same definition you are using when defining new functions. It's correct until you start to add some properties and methods to it.

So lets do that

function CustomerDetails()
{ 
var custName;
var custSurname:
var custCarModel;
var carPrice;
var carColor;
}

Now you have defined your template for CustomerDetails object. So how do you add properties and methods to it? Simply by using prototype property. Prototype property let's you add properties and methods to objects. So let's add some methods and properties to our CustomerDetails reference type.

CustomerDetails.prototype.setCustName = function(cName)
{
this.custName = cName;
}

CustomerDetails.prototype.setCustSur = function(cSurname)
{
this.custSurname = cSurname;
}
...

How do you get values from your variables?

CustomerDetails.prototype.getCustName = function()
{
return this.custName;
}

CustomerDetails.prototype.getCustSur = function()
{
return this.custSurname;
}
...

In the code above "this" keyword referes to that object instace of your reference type.

So now that you have defined all of your methods and properties you have to be aware of one more thing. JavaScript won't create an object until you say so.

How do you tell JavaScript to create an instace of object?

var custDetails = new CustomerDetails();

Word new simply tells JavaScript to create new Object while CustomerDetails() is the constructor for that object (the one that you have built up). Now that you have created an instance of your object you can use it's properties and methods like with any other object in JavaScript (String, Array, Number...). So let's do that

var custDetails = new CustomerDetails();

custDetails.setCustName("name");
custDetails.setCustSur("surname");

document.write("Your name is " + custDetails.getCustName() + " and your surname is " + custDetails.getCustSur())

The output will looke like this:

Your name is name and your surname is surname.

Hope this one will help you out.

tech_soul8

...btw built-in objects such as String, Array, Number... are also reference types and you create an instance of them using the new method and constructor name.

var myarray = new Array()

21stnomad

hii tech_soul8

thanks a lot...giving the clear idea about the prototypes and constructors.

what does below code implies?

function Person(){
}
Person.prototype = {
constructor: Person,
name : “Nicholas”,
age : 29,
job : “Software Engineer”,
sayName : function () {
alert(this.name);
}
};

tech_soul8

Well... firstly I have to remind you that I'm not an expert too . Secondly reference types are some pretty advanced stuff in JavaScript. Thirdly I have never seen syntax like that before but... if you look at it more closely you'll see next:

function Person(){
}

is the same as

function CustomerDetails() {}

and it is used to define your reference type.

The next block of code looks like this:

Person.prototype = {
constructor: Person,
name : &#8220;Nicholas&#8221;,
age : 29,
job : &#8220;Software Engineer&#8221;,
sayName : function () {
alert(this.name);
}

and it is the same as if you have wrote it like this

Person.prototype.getName = function ()
{
return this.name;
}

So if you use this syntax

function Person(){
}
Person.prototype = {
constructor: Person,
name : &#8220;Nicholas&#8221;,
age : 29,
job : &#8220;Software Engineer&#8221;,
sayName : function () {
alert(this.name);
}
};

You'll get an alert box with "Nicholas" name inside it.

If you're wondering how to run the code and why did you get "Nicholas" look at this

function Person(){
}
Person.prototype = {
constructor: Person,
name : &#8220;Nicholas&#8221;,
age : 29,
job : &#8220;Software Engineer&#8221;,
sayName : function () {
alert(this.name);
}
};

var perName = new Person();
perName.sayName();

So you declare new variable and call it perName. You initialize this variable by creating a new object with the new keyword and with the Person constructor for that object. Recall from previous post that in this case Person is the constructor you are calling when you want JavaScript to create a new object that you have defined.

By setting your variable (perName) to reference your Person object you can call it's properties and methods and that's exactly what you did by typing the following:

perName.sayName();

So for example if you want to change former code to show how old "Nicholas" is you have to change the last line of code to look like this

alert(this.age);

And for the end just to try to make it more clear to you if you didn't understand it yet you could also rewrite your code to look like the example for the CustomerDetails().

function Person()
{
var name;
var age;
var job;
}

Person.prototype.setName = function(perName)
{
this.name = perName;
}

Person.prototype.setAge = function(perAge)
{
this.age = perAge;
}

Person.prototype.setJob = function(perJob)
{
this.job = perJob;
}

Person.prototype.sayName = function()
{
return this.name;
}

So what you get is the same result, difference is only in syntax you use. Although it looks like if you go with my example you'll have to type more lines of code but that's the way I do it when it comes to reference types.

Hope things are now more clear to you.

DemonToe

Hello, I just registered here. Is it possible to get help with a sophomore level Java program? I have worked on it for three days and I cannot get it. Thanks to anyone who can help.

tech_soul8

...
name : &#8220;Nicholas&#8221;
...

same as:

Person.prototype.setName = function(perName)
{
this.name = perName;
}

etc...

tech_soul8

Or you could also write it like this:

Person.prototype.setName = function()
{
this.name = "Nicholas";
}

Above code is really clumsy because to set name you have to call the function but I just gave you an example to see number of ways you can do it (as with the everything else in programming in general).

Much better solution and the most close one to your example but on my way would be:

function Person()
{
this.name = "Nicholas";
}

As you can see there are really number of ways to do the same thing on many different ways.

JMRKER

Minor correction to your code...

Person.prototype = {
  constructor: Person, 
  name : &#8220;Nicholas&#8221;,  // problem with these quotes
  age : 29,
  job : &#8220;Software Engineer&#8221;,  // and again, problem with these quote characters
  sayName : function () { alert(this.name); }
};

// should be written with "real" text quotes, not the wordprocessor paired quote characters.
Person.prototype = {
  constructor: Person, 
  name : [COLOR="#FF0000"]"Nicholas"[/COLOR],
  age : 29,
  job : [COLOR="#FF0000"]"Software Engineer"[/COLOR],
  sayName : function () { alert(this.name); }
};

Sample code with modification assignments...

<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta charset="utf-8">

</head>
<body>
<pre id="debug"></pre>

<script type="text/javascript">
// Modified from post #13
// on: http://www.webdeveloper.com/forum/showthread.php?283505-prototype-and-constructor-in-javascript

function Person(){}
Person.prototype = {
  constructor: Person,
  Pname : "Nicholas",
  age : 29,
  job : "Software Engineer",
  sayName : function (IDS) {
    var str = '<p>'+this.Pname+' is a '+this.age+' year old '+this.job;
    document.getElementById(IDS).innerHTML += str;
  }
};

var perName = new Person();
perName.sayName('debug');

// can also modify original entry
perName.Pname = 'Mary';
perName.age = 23;
perName.job = 'runway model';
perName.sayName('debug');

</script>

</body>
</html>

JMRKER

DemonToe;1286789 wrote:
Hello, I just registered here. Is it possible to get help with a sophomore level Java program? I have worked on it for three days and I cannot get it. Thanks to anyone who can help.

Welcome to the forums, but you might get better help from the correct forum.
This is the JavaSCRIPT forum, not the Java forum.

Might request the moderator move your query.