What is prototype in Javascript?
Topics

--><!-- Nothing works without HTML -->

<div><h1>The prototype property of functions in Javascript</h1>
<h2>this and the constructor function - creating an object</h2>

<img src="../images_July_2015/simple_object_with_prototype.png" width="799" height="625" alt="prototype, constructor in Javascript, function object" />
<h3>Scroll right down and press the "sneak peak" button to see the code.</h3>
<div>
<br />
<br />
<div id="label" onclick = 'bluesquare.identity()';><div class="content">Click on me and I will tell you what I am.</div></div>
<br />
<br />
</div>

<p>There are quite a few ways to create objects in Javascript. The first one is this (click on sneak peek button to see):</p>


<script type="text/javascript">


var alive = {}

</script>

<p>In chrome's console you can then visualize a primitive object with properties, even though no properties have been assigned to it, the "archetypal"
object one could say. It is a primitive native object in its purest form:</p>
<img src="images_July_2015/object1.png" width="315" height="144" alt="the object with object as prototype" />

<p>Access the console by clicking on the menu symbol and then
<a href="https://developer.chrome.com/devtools/docs/console" target="_blank">
/More tools/JavaScript console</a>.</p>



<script type="text/javascript">
alive = null;//doesn't exist anymore now
</script>

<p>Let's put something inside, using <a href="https://en.wikipedia.org/wiki/JSON">Json</a>:</p>


<script>

var alive = {
"firstName": "John",
"lastName": "Smith",
"isAlive": true,
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021-3100"
},
"phoneNumbers": [
{
"type": "home",
"number": "212 555-1234"
},
{
"type": "office",
"number": "646 555-4567"
}
],
"children": [],
"spouse": null
}
</script>

<p>Now you will see:</p>
<img src="images_July_2015/object2.png" width="320" height="303" alt="Json, a simple object" />



<p>Now creating something awesome, you will want to have more than one object of the same type. To do this you can
make use of the new keyword. This is another way to create an object.</p>




<script type="text/javascript">//another variant

function Square(color, width, height) {
this.color = color;
this.width = width;
this.height = height;
this.identity = identity;
}


function identity() {
var square_says = "I am a " + this.color + " square, my width is " + this.width + " and my height is " + this.height + ".";
var Label = window.document.getElementById("label");
Label.innerHTML = "<div class=\"content\">" + square_says + "</div>";
};


var bluesquare = new Square("blue", "400px", "400px");


</script>


<p>This amounts to:</p>
<img src="images_July_2015/object3.png" width="471" height="666" alt="objects in the object inspector" />

<p>Let's get rid of John Smith and create another instance of the object Square. Let's call it blacksquare:</p>

<script type="text/javascript">

alive = null;//doesn't exist anymore now




var blacksquare = new Square("black", 100, 800);

Square.prototype.showidentity = function() {//make it black
var square_says = "I am of " + this.color + " color and " + this.width + "px is my width and " + this.height + "px is my height.";
var Label = window.document.getElementById("label");
Label.innerHTML = "<div class=\"content\">" + square_says + "</div>";
Label.style.height = this.height + 'px';
Label.style.width = this.width + 'px';
Label.style.backgroundColor = this.color;
Label.style.color = "#7C7C7C";
Label.style.border = "solid 2px #444444";
};

</script>


<p>
Type this into the console and you will see the blacksquare appear (above):
"blacksquare.showidentity();". You can also use the
opera console or any other one:</p>
<img src="images_July_2015/blacksquare.png" width="799" height="462" alt="" border="0">
<p>Note that I first created the instance (var blacksquare = new Square("black", 100, 800);).
Then I added the function showidentity() to the Square object (Square.prototype.showidentity = function()).
This makes it available to all instances of Square. The bluesquare instance is displayed through
css which is applied to the div with the id "label". The style is already fixed in
the css file. The blacksquare is of the same type but it
is created by dynamically manipulating the css style properties:
</p>

<pre>
Label.style.height = this.height + 'px';
Label.style.width = this.width + 'px';
Label.style.backgroundColor = this.color;
Label.style.color = "#7C7C7C";
Label.style.border = "solid 2px #444444";
</pre>

<p>
After an instance of blacksquare was created, the function showidentity() was added to
the prototype property of the object square. What does this do?
And what is a <a href="https://en.wikipedia.org/wiki/Prototype">prototype</a>?</p>


<p>It is exactly what the name implies, a model or if you like a "demonstration model for a
new technology or future product". In the context of Javascript it is the model for the instance.
The prototype property points to the object that is a model for the instances, that are generated:
</p>

<img src="images_July_2015/object5.png" width="502" height="115" alt="" />


<p>The __proto__ property of the instance points to the same object, which is why anything you add to the prototype (Square.prototype)
is instantly accessible for the instances, too.</p>

<img src="images_July_2015/object4.png" width="510" height="119" alt="" />



<p>When you generate the black square through the console, the event handler is again set to 'bluesquare.identity()'. If you click on it
now, the square will claim to be a blue one.</p>
<p>If you are looking to understand the concepts, you must also read
<a href="http://sporto.github.io/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/" target="_blank">this article</a> and
<a href="http://www.codeproject.com/Articles/687093/Understanding-JavaScript-Object-Creation-Patterns" target="_blank">this one</a>.</p>
<br>
<br>
<br>
<?php $Weblog->share ();?>

</div>

Sneak peek of the server side code