this and the constructor function - creating an object
Scroll right down and press the "sneak peak" button to see the code.
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:
Let's put something inside, using Json:
Now you will see:
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:
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?
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.
Sneak peek of the server side code