What is prototype in Javascript?
Topics

The prototype property of functions in Javascript

this and the constructor function - creating an object

prototype, constructor in Javascript, function object

Scroll right down and press the "sneak peak" button to see the code.



Click on me and I will tell you what I am.


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

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:

the object with object as prototype

Access the console by clicking on the menu symbol and then /More tools/JavaScript console.

Let's put something inside, using Json:

Now you will see:

Json, a simple object

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.

This amounts to:

objects in the object inspector

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

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:

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:

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";

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 prototype?

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:

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.

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.

If you are looking to understand the concepts, you must also read this article and this one.




submit to reddit


Sneak peek of the server side code