Core Javascript

Classes In Javascript

1. Using a function

This is probably one of the most common ways. You define a normal JavaScript function and then create an object by using the new keyword. To define properties and methods for an object created using function(), you use the this keyword, as seen in the following example.

   Process = function()
    {
        this.a = 12;
        this.Step = function(){
            this.a=13;
            alert(this.a);
        }
    }
    var obj = new Process();
    alert(obj.a)
    obj.Step();

 OR

    clsPerson = function()
    {
        this.per = "This is";
        clsPerson.prototype.employee = function(){
            this.per += " another ";
            alert(this.per + "employee method");
        }

        this.accountant = function(){
            alert(this.per + "accountant method");
        }

        clsPerson.prototype.hr = function(){
             this.per += " so ";
             alert(this.per + "hr method");
        }
    }
    var obj = new clsPerson();
    obj.employee();
    obj.accountant();
    obj.hr(); 

2. Using object

Literals are shorter way to define objects and arrays in JavaScript. To create an empty object using you can do:

var o = {};

instead of the "normal" way:

var o = new Object();

For arrays you can do:

var a = [];

instead of:

var a = new Array();

So you can skip the class-like stuff and create an instance (object) immediately. Here's the same functionality as described in the previous examples, but using object literal syntax this time:

    var step = {
        a: 12,
        process: function(){
            a = 13;
            alert(a);
        }
    }
    alert(step.a);
    step.process();

3. Singleton using a function

The third way presented in this article is a combination of the other two you already saw. You can use a function to define a singleton object.

    var step = new function(){
        this.a = 2;
        this.prcoess = function(){
            this.a=3;
            alert(this.a);
        }
    }
    alert(step.a);
    step.prcoess();

Understanding JavaScript Closures

In JavaScript, a closure is a function to which the variables of the surrounding context are bound by reference.
    

 A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments object, however, even though it can call the outer function’s parameters directly.

You create a closure by adding a function inside another function.
A Basic Example of Closures in JavaScript:


   function showName (firstName, lastName) 
       {

          ​var nameIntro = "Your name is ";// this inner function has access to the outer function's variables, including the    parameter​
         ​function makeFullName () {
      
              ​return nameIntro + firstName + " " + lastName;
  
         }
        ​return makeFullName ();

        }

   showName ("Michael", "Jackson"); // Your name is Michael Jackson


Closures are used extensively in Node.js; they are workhorses in Node.js’ asynchronous, non-blocking architecture. Closures are also frequently used in jQuery and just about every piece of JavaScript code you read.
A Classic jQuery Example of Closures:


  $(function() {
    ​var selections = [];
        $(".niners").click(function() { // this closure has access to the selections variable​
           selections.push (this.prop("name")); // update the selections variable in the outer function's scope​
        });
    });

Another Example:-

function getMeAClosure() {
    var canYouSeeMe = "here I am";
    return (function theClosure() {
        return {canYouSeeIt: canYouSeeMe ? "yes!": "no"};
    });
}
var closure = getMeAClosure();
closure().canYouSeeIt; //"yes!"