Why we will use Prototypes in javascript

What is the different between these 2 snippets of code:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}

function animal(){
    this.name = 'rover';
}
animal.prototype.set_name = function(name){
    this.name = name;
}

They both do the same thing, so whats the difference?

 

Using the prototype makes for faster object creation, since that function does not have to be re-created each time a new object is created.

When you do this:

function animal(){
    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
    }
}

The set_name function is created de novo each and every time you create an animal. But when you do this

animal.prototype.set_name = function(name){
    this.name = name;
}

The function does not have to be re-created each time; it exists in one place in the prototype. So when you call someAnimal.set_name("Ubu"); the this context will be set to someAnimal and (the one and only) set_name function will be called.


There is one advantage to using the first syntax though: functions created in this manner will have access to private data:

function animal(){
    var privateData = 'foo'

    this.name = 'rover';
    this.set_name = function(name){
         this.name = name;
         alert(privateData); //will alert 'foo'
    }
}

Douglas Crockford calls functions created like this “privileged” for that reason: they have access to both public, and private data.

Difference between Loosely coupled and tightly coupled in programming sense

Tight coupling is when a group of classes are highly dependent on one another.

This scenario arises when a class assumes too many responsibilities, or when one concern is spread over many classes rather than having its own class.

Loose coupling is achieved by means of a design that promotes single-responsibility and separation of concerns.

A loosely-coupled class can be consumed and tested independently of other (concrete) classes.

Interfaces are a powerful tool to use for decoupling. Classes can communicate through interfaces rather than other concrete classes, and any class can be on the other end of that communication simply by implementing the interface.

Example of tight coupling:



			
		

Javascript closures

Closure is when a function “remembers” its lexical scope even when the function is executed outside that lexical scope.

Closure is the capability for an function to remember ac access of its lexical scope even when that function is executed outside of that defined lexical scope.

 

function foo(){

var bar =”bar”;

 

function baz(){

console.log(bar);

}

bam(baz);

}

 

function bam(baz){

baz(); // displays bar

}

 

foo();

// the capability of bar to continue to reference that same scope lookup even bar is executing outside is called closure

What is lexical scope??

Console.log(bar) will look for “bar” inside the baz function, then it move on to function foo and access the bar value over line 2. This is called lexical scope.

Another Example:

Lets say, on each time you click a button.. value has to be increment. In generally first procedure will show you on clicking each time same value will be printing..where are second procedure shows you a closure method.

 

1st procedure:

function count(){

var a=5;

a=a+1;

}

When you assign this count() method to ng-click like ng-click=”count()” will always return 6.

The desired functionality like each click count should increase can be achieved by closures as follows:

var count = (function(){

var a=5;

return function(){

a = a+1;

return a;

}

});

 

count(); // return 6

count(); // this time return 7

Javascript inheritance example

<html>Inheritance
<body>
<script>
// Create a class
var vehicle = function(modelname){
var that = {};
that.engine = “suzuki”;
that.tyres = “MRF”;
that.modelname = modelname;
that.getModel = function(){
console.log(this.modelname+”has engine”+that.engine);
}
return that;
}

var twowheeler = function(model){
var that = vehicle(model);
that.type = “two wheeler”;
return that;
}

var glamour = twowheeler(“g20”);
glamour.engine; // should display suzuki
console.log(glamour.engine);
glamour.getModel(); // display g20 has suzuki
console.log(glamour.getModel());
</script>
</body>
</html>

Javascript method overridden

Best example of method overridden is here..

<html>Method override
<body>
<script>
// Create a class
function Vehicle(color){
this.color = color;
}

// Add an instance method
Vehicle.prototype.go = function(){
return “Underway in ” + this.color;
}

// Add a second class
function Car(color){
this.color = color;
}

// And declare it is a subclass of the first
Car.prototype = new Vehicle();

// Override the instance method
Car.prototype.go = function(){
return Vehicle.prototype.go.call(this) + ” car”
}

// Create some instances and see the overridden behavior.
var v = new Vehicle(“blue”);
v.go() // “Underway in blue”
console.log(v.go());

var c = new Car(“red”);
c.go() // “Underway in red car”
console.log(c.go());
</script>
</body>
</html>