Classes in JavaScript?

I was busy one day, creating a windows 8 application. I felt at one point like using a class. Actually I want to create a custom list of mine that will be used for fetching data from the JSON result, that one of my WCF service was returning. I know JavaScript is an object oriented programming language, but as soon as I type the keyword class, visual studio, without even realizing the pain of my broken heart, refused to compile the code.

It was really puzzling. After few minutes of struggling and 2 to 3 cups of hot coffee, I got that long awaited, Eureka moment. One line that attracted my attention most was, “though JavaScript is an object oriented programming language, but it is prototype based, not class based.” In JavaScript, everything is an object. In order to get the idea of what we are talking about, let’s write some code.

Create a new windows 8 application, in case you are missing the steps, get them from here. Somewhere in the default.js file, create the following function prototype.

function MyClass() {

       this.FirstName;

       this.LastName;

       this.fullName =  function Name() {

           return this.FirstName + " "  + this.LastName;

       }

The code above is a function but we can create objects of it, just like as we do with classes. The variables FirstName and LastName are the properties (so called as data members in OOP)  and fullName will posses the result returned by the function Name() (called as the member function). Using above method is simple here is the code block describing it’s use case.

var myObject = new MyClass();

myObject.FirstName = "Neelesh";

myObject.LastName = "Vishwakarma";

var fN = myObject.fullName();

We can create the object using the new keyword and by using the, so called dot operator, we can access it’s internal properties. Calling fullName will return the combination of both FirstName and LastName, which will get stored in the variable fN. Here is the whole code of my default.js file.

(function () {

    "use strict";

    WinJS.Binding.optimizeBindingReferences = true;

    var app = WinJS.Application;

    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {

            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

                var myObject = new MyClass();

                myObject.FirstName = "Neelesh";

                myObject.LastName = "Vishwakarma";

                var fN = myObject.fullName();

                Name.innerText = fN;

            } else {

                // TODO: This application has been reactivated from suspension.

                // Restore application state here.

            }

            args.setPromise(WinJS.UI.processAll());

        }

    };

    app.oncheckpoint = function (args) {

    };

    app.start();

    function MyClass() {

        this.FirstName;

        this.LastName;

        this.fullName =  function Name() {

            return this.FirstName + " "  + this.LastName;

        }

    }

})();

As you can see, the code will only execute once, at the application startup. Also the resulted Name in fN has been displayed on the UI via the paragraph tag. This is simply how classes are created and used in JavaScript. Stay Tuned!

Happy Reading!!!