By 06/07/2015 16 Comments

Create JavaScript Closures Using TypeScript

Definition Of JavaScript Closures:

  • JavaScript closure is a technique which is implemented by TypeScript compiler to implements the classes in generated JavaScript at run-time.

OR

  • A closure is a special kind of object which contains a function.
  • Closures are the functions which refers to independent variables and these variables remember the environment in which they were created.
  • As a programmer we do not need to write JavaScript closures in .js files, these closures are written/generated automatically through TypeScript compiler. It means when we write object oriented principals, classes, inheritance in TypeScript file .ts then the TypeScript compiler creates JavaScript closures in generated JavaScript files .js for us at run-time.

Example – 1, Describes The Essential Nature Of Closures:

// Outer function declaration which takes 1 parameter
function MyClosure(digit) {

// Assign a local variable (parameter) into another variable.
    this._digit = digit;

// Inner function declaration which has empty parameter list.
    function square() {

// Perform multiplication.
        document.write(""+this._digit * this._digit);
    }

// A return keyword which returns an inner function square().
    return square;
}

/* Call an outer function, pass an argument in it. This function is assigned into a local variable var myClosure. */
var myClosure = MyClosure(5);

/* A local variable (myClosure) is being executed like a function myClosure(), NOTE: an inner function square() will be called through the execution of this function. */  
myClosure();

Example – 2, TypeScript Class:

class ClosureDemo { // A class declaration.

// A string type property declaration with “private” access.
    private website: string;

// A one parameterized constructor which initializes website name.
    constructor(website: string) {
        this.website = website;
    }

/* String type function declaration which returns a website name with URL address. */
    displayWebsite(): string {
        return "<a href = 'https://tutorialstown.com' target = '_blank'>" + this.website + "</a>";
    }
}

/* An object creation of above class, here is a constructor which sets website name as an argument. */
var web: ClosureDemo = new ClosureDemo("tutorialstown");

/* Call a function through an object reference variable (web) and also display it.*/
document.write("Website: " + web.displayWebsite());

Example – 3, A JavaScript Closure Which Is Automatically Created From Above TypeScript Class (ClosureDemo) At Run-Time.

var ClosureDemo = (function () { // Starting scope of a closure.

/* Following function is used as a closure constructor with 1 parameter. */
    function ClosureDemo(website) {
        this.website = website;
    }

/* Closure name is linked via dot (.) operator with a property (prototype), this property is automatically inherited when a JavaScript object is constructed. This property belongs with the original object. Here a function is also declare which is a part of a prototype property. */
    ClosureDemo.prototype.displayWebsite = function () {
        return "<a href = 'https://tutorialstown.com' target = '_blank'>" + this.website + "</a>";
    };
    return ClosureDemo;
}) // Closure is ended. 

/* These braces are essential, because the function expression is immediately executed through these braces (); and this technique is known as an Immediately Invoked Function Expression	(IIFE). */
 (); 

/* An object creation of above class, here is a constructor which sets website name as an argument. */
var web = new ClosureDemo("tutorialstown");

/* Call a function through an object reference variable (web) and also display it.*/
document.write("Website: " + web.displayWebsite());






Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .