Elementary OO Javascript and prototyping II

Prev Post
We will learn some basic prototyping today

Every object has a prototype property

function Foo(){};
alert(Foo.prototype); // displays object

Every object has a prototype

function Foo(){};
alert(Foo.__proto__); // displays Function

function Foo(){};
alert(Foo.__proto__ === Foo.prototype); // displays false

function Foo(){};
alert(Foo.__proto__ === Function.prototype); //displays true

I'll reiterate every function has prototype property and prototype

N.B.: We'll be using prototype property and not prototype(i.e. __proto__)

a) Let's take a constructor object

function Foo() { function Foo() {
this.name = "foobar"; this.name = "foobar";
this.getName = function() { };
alert(this.name); Foo.prototype.getName = function() {
} alert(this.name);
}; }
var foo = new Foo(); var foo = new Foo();
foo.getName(); // displays foobar                        foo.getName(); // displays foobar

b) Both give same result so why use prototyping at first place. Lets modify the code

function Foo() { function Foo() {
  this.name = "foobar"; this.name = "foobar";
  this.getName = function() {                                }
      alert(this.name);
      }                                                                        Foo.prototype.getName = function(){
} alert(this.name);
                                                                               }
var foo;   var foo;
var foobars = [];                                                       var foobars = [];
for (var i = 0; i < 1000; i++) {                                    for (var i = 0; i < 1000; i++) {
    foo = new Foo();                                                      foo = new Foo();
  foobars.push(foo);  foobars.push(foo);
}                                                                                }

The advantage of prototyping is better memory usage and performance 

To understand the screen shots:
Shallow size of an object is the amount of memory allocated to store the object itself, not taking into account the referenced objects. Shallow size of a regular (non-array) object depends on the number and types of its fields. Shallow size of an array depends on the array length and the type of its elements (objects, primitive types). Shallow size of a set of objects represents the sum of shallow sizes of all objects in the set.

Retained size of an object is its shallow size plus the shallow sizes of the objects that are accessible, directly or indirectly, only from this object. In other words, the retained size represents the amount of memory that will be freed by the garbage collector when this object is collected.

Now consider the memory usage with Enterprise application objects. (Something worth to think over)

c) How to use prototyping

Let us make a constructor object Employee with propert Name and getter and setter method.

function Employee() {
this.name = "";
}
Employee.prototype.setName = function(name) {
this.name = name;
}
Employee.prototype.getName = function() {
alert(this.name);
}
var employee = new Employee()
employee.setName("Ankit");
employee.getName(); // displays Ankit
alert(employee.name); // displays Ankit

This seems a little raw as we have to add each method to the prototype, the below snippet is more refined

function Employee(name) {
this.name = name;
}
Employee.prototype = {
getName : function() {
alert(this.name);
},
setName : function(name1) {
this.name = name1;
}
};

The below snippet gave me butterflies because this seems very memory efficient. (Please comment on below snippet because this seems awesome)

function Employee(name) {
var name = name;
return {
getName : function() {
alert(name);
},
setName : function(name1) {
name = name1;
}
};
}

Happy Coding Cheers!!!! :)