Altaf Khatri
Altaf Khatri



RSS feed for http://www.AltafKhatri.com website. Twitter account of http://www.AltafKhatri.com website.
∗Recently Added - How to take care of Betta fighter fish and increase life span?  10/30/2013


Find me on web

 LinkedIn

 Facebook

 Twitter

Understand classes, objects, prototypes, inheritance, anonymous, static class in javascript?


In this article, I will discuss about object based javascript. It's confusing, unless you nail it down.

We will look at the following topics:
  1. Javascript class
  2. Javascript object creation
  3. Where prototype fits in?
  4. Static class
  5. Anonymous class
  6. Inheritance in javascript
  7. Constructor with parameters in javascript
  1. Javascript class:
    A function in javascript is a class definition.

                var classA = function () {

                    var privateProperty = "";

                    this.property1 = "";

     

                    var privateMethod = function () {

                    };

                    this.method1 = function () {

                    }

                }


    Here "classA" is a javascript class. You can access properties and methods by creating an object of this class.

    Properties:
    Private: privateProperty
    Public: property1
    Method:
    Private: privateMethod
    Public: method1

  2. Creating object of a class:

    var objOfClassA = new ClassA();

    We can new up an object of a class.

    var classAObj = new classA();

    var classBObj = new classA();

    var classCObj = new classA();

    Now, I can access the public properties and methods on classAObj, classBObj, classCObj by using:

    classAObj.property1

    classCobj.property3

    classAObj.property2

     

    classAObj.method1()

    classBObj.method1()

    classCObj.method1()

    Each property will be created for a separate instance of classA. As expected, private properties and methods are inaccessible when using the object.

  3. Where prototype fits in?
    Now lets say you already have a class and want to extend it without modifying the definition of the class you could add properties and methods to it using prototype.

            var classA = function () { };

     

            classA.prototype.property1 = "";

            classA.prototype.method1 = function () {

            };

    You can create the object of class A and access the public properties and methods added as part of prototype.

    Remember the class created in point 1 and point 3 above are the same(with minute distinction which you don’t need to know unless you want to get in real deep).

    var classA = function () {

                var privateProperty = "";

                this.property1 = "";

     

                var privateMethod = function () {

                };

                this.method1 = function () {

                    alert(this.property1);

                }

            }

     

            var objClassA = new classA();

            objClassA.property1 = "RegularClass";

            objClassA.method1();

    OR

            var classB = function () { };

            classB.prototype.property1 = "";

            classB.prototype.method1 = function () {

                alert(this.property1);

            };

     

     

            var objClassB = new classB();

            objClassB.property1 = "Prototype Class";

            objClassB.method1();

    Both are same things. Both generate the public properties and methods.
    You will have the properties and methods that will be part of the objects of the class.

    So question is when should I use prototype?
    Prototype can be used after the class has been defined. In situations, when you don’t have control over the javascript class, you can use prototype.
    Eg. For prebuilt String class you can extend it to have ltrim, rtrim and trim functions by using prototype.

            String.prototype.ltrim = function () {

            }

     

            String.prototype.rtrim = function () {

            }

     

            String.protype.trim = function () {

            }

     

     

            String.prototype.Trim = function () {

                alert("Trimming");

            };

            var str = new String();

            str.Trim();

    You can then use String class with these new methods.
    It is similar to extension methods that are used in C#.

  4. Static class
    As the name say the class is static and we cannot instantiate the object of this class. We cannot have prototypes on this static class as it is meaningless.

    var staticClass = {

                method1: function () {

                    alert("property1");

                },

                method2: function () {

                    alert("testing");

                }

            }

     

            staticClass.method1();

     

            staticClass.method2();

  5. Anonymous class
    Create an object of the class when declaring it. We cannot have prototypes on this class.

    var anonymousClass = new function () {

                this.property1 = "";

                this.method1 = function () {

                    alert(anonymousClass.property1);

                }

            }

     

            anonymousClass.property1 = "Anonymous";

            anonymousClass.method1();

  6. Inheritance in javascript
    If you have read so far then I hope you are all set to understand the inheritance. If not then go back and read it once more and try the examples yourself. Inheriting properties and methods from parentClassA to childClass is simple. You need only two lines of code.

    var parentClass = function () {

                this.parentClassMethod = function () {

                    alert("parentClassMethod");

                }

            }

     

     

     

            var childClass = function () {

                this.parentClass_NameCanBeSameAsParentClass = parentClass;

                this.parentClass_NameCanBeSameAsParentClass();

                this.derivedClassMethod = function () { alert("derivedClassMethod"); }

            }

     

     

            var childClassObject = new childClass();

            childClassObject.parentClassMethod();

            childClassObject.derivedClassMethod();

    In the child class we have to define public property that will point to the inherited class
    this.parentClass_NameCanBeSameAsParentClass = parentClass;
    And then next line execute the property pointing to the class.
    this.parentClass_NameCanBeSameAsParentClass();

    Now when you create the object of the derived class you will get the properties and methods from the parentClass.

  7. Constructor with parameters:
    Sometimes you want to initialize values when creating objects. You can use constructor with parameter to achieve this:

    var parentClass = function () {

                this.parentClassMethod = function () {

                    alert("parentClassMethod");

                }

            }

     

     

     

            var childClass = function (param) {

                var localVariable = param;

                this.parentClass_NameCanBeSameAsParentClass = parentClass;

                this.parentClass_NameCanBeSameAsParentClass();

                this.derivedClassMethod = function () {

                    alert(localVariable);

                }

            }

     

            var childClassObject = new childClass("Parameter");

            childClassObject.derivedClassMethod();

     

            var childClassObject2 = new childClass("Parameter2");

            childClassObject2.derivedClassMethod();

     

            var childClassObject3 = new childClass();

            childClassObject3.derivedClassMethod();





SiteMap  |  Contact Me