JavaScript OOP

Dev

JavaScript OOP

by Mark Gardner
//

JavaScript is a very different language when it comes to Object Oriented Programming. Out of the box it doesn’t support class based OOP, but with some cleaver changes you will be able to add it. One thing look out for is how much memory each trick will use. When you use private vars/functions it will have to create individual versions for each instance of the object. Thus the memory requirements grow with each object. Whereas using the prototype structure will reuse the functions and properties as much as possible allowing each instance of the object to use much less memory. Here are a few common example class styles using ext.

Prototype style with no super/base class:

// This will act as the constructor
var MyClass = function(config) {
    this.initialConfig = config;
}

// This will add the properties and functions
// to the function's prototype(class structure)
Ext.apply(MyClass.prototype, {
    myProperty: "value",
    myFunction1: function() {
        // do Something
    }
});

Prototype style with super/base class:

var MyClass = Ext.extend(Ext.grid.GridPanel, {

    // The constructor is declared in the config object.
    constructor: function(config) {

        this.initialConfig = config;

        // Call the super/base class constructor like this.
        // Must use the call function to pass the proper scope.
        MyClass.superclass.constructor.call(this, config);
    },

    myProperty: "value",
    myFunction1: function() {
        // do Something
    }
});

Class with private fields and functions:

var MyClass = (function() {
    var private1 = null;

    function myPrivateFunction() {
        // Do something
    }

    return Ext.extend(Ext.grid.GridPanel, {
        // The constructor is declared in the config object.
        constructor: function(config) {
            this.initialConfig = config;
            // Call the super/base class constructor like this.
            // Must use the call function to pass the proper scope.
            MyClass.superclass.constructor.call(this, config);
        },
        myProperty: "value",
        myFunction1: function() {
            // do Something
            return private1;
        },
        myFunction2: function() {
            // do Something
            return myPrivateFunction();
        }
    });
})();

Static Class with private fields and functions that has super/base class:

var MyClass = (function() {
    var private1 = null;

    function myPrivateFunction() {
        // Do something
    }
return new (Ext.extend(Ext.grid.GridPanel, {
        // The constructor is declared in the config object.
        constructor: function(config) {

            this.initialConfig = config;

            // Call the super/base class constructor like this.
            // Must use the call function to pass the proper scope.
            MyClass.superclass.constructor.call(this, config);

        },
        myProperty: "value",
        myFunction1: function() {
            // do Something
            return private1;
        },
        myFunction2: function() {
            // do Something
            return myPrivateFunction();
        }
    }))();
})();

Static Class with private fields and functions that has does not super/base class:

var MyClass = (function() {
    var private1 = null;

    function myPrivateFunction() {
        // Do something
    }

    return {
        myProperty: "value",
        myFunction1: function() {
            // do Something
            return private1;
        },
        myFunction2: function() {
            // do Something
            return myPrivateFunction();
        }
    };
})();

You can mix and match these different style to match your needs for the object.

KeepWatch by InterWorks

Whether you need support for one platform or many, our technical experts have you covered.

More About the Author

Mark Gardner

Software Engineer
Avoiding Memory Leaks and JavaScript best practices Memory leaks can be very hard to indentify. Most of the time this is because the amount of memory that leaks is so small you won’t see ...
JavaScript OOP JavaScript is a very different language when it comes to Object Oriented Programming. Out of the box it doesn’t support class ...

See more from this author →

InterWorks uses cookies to allow us to better understand how the site is used. By continuing to use this site, you consent to this policy. Review Policy OK

×

Interworks GmbH
Ratinger Straße 9
40213 Düsseldorf
Germany
Geschäftsführer: Mel Stephenson

Kontaktaufnahme: markus@interworks.eu
Telefon: +49 (0)211 5408 5301

Amtsgericht Düsseldorf HRB 79752
UstldNr: DE 313 353 072

×

Love our blog? You should see our emails. Sign up for our newsletter!