User-friendly Object Model in JavaScript

Member 10277780

Rate me:

4.89/5 (5 votes)

25 Sep 2013CPOL1 min read

17.4K

User-friendly object model in JavaScript

Introduction

It won't be easy for beginner programmers to understand the principles of the object model and inheritance in JavaScript. I will try to help you: to describe a class, it is necessary to describe class constructor (it is just a simple function). Class methods and inheritance are described through prototypes. The hidden methods and properties are made through closing.

But to my mind, this way isn't convenient. I will tell you a simpler way. Let's create the project:

HTML

<!DOCTYPE HTML>
<html>
<head>
   <title>Sample project</title>
   <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
   <!-- Scripts -->
   <script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
   <script type="text/javascript">
       /**
         * Entry point
         */
       function main() {
       }
   </script>
</body>
</html>

The main function will be called automatically after page is loaded. In our example HTML code doesn't change therefore I will write only a JavaScript-code. Let's create a class TMyClass.

JavaScript

/**
  * My class
  */
var TMyClass = AWeb.class({
    public : {
      /**
        * Constructor
        */
      constructor : function() {
         alert( "MyClass constructor" );
      }
   }
});

/**
  * Entry point
  */
function main() {
   var myClass = new TMyClass();
}

Let's add the private variable "name" and the public method "getName":

JavaScript

/**
  * My class
  */
var TMyClass = AWeb.class({
    public : {
      /**
        * Constructor
        */
      constructor : function( initValue ) {
         this.name = initValue||"A-class";
      },
      
      /**
        * Returns name
        */
      getName : function() {
         return this.name;
      }
   }
});

I draw your attention to the fact that the "name" variable is available only in the class TMyClass. The call of "myClass.name" will return undefined value. But the call of "myClass.getName()" will return "A-class" value.

Let's create an inherit class:

JavaScript

/**
  * My class
  */
var TMyInhClass = AWeb.class({
    extends : TMyClass,
    public : {
      /**
        * Constructor
        */
      constructor : function() {
         this.super( "B-class" );
      }
   }
});

The inherit class can access all the public and protected methods of a parent class. There is an example of call:

JavaScript

/**
  * Entry point
  */
function main() {
   var myClass = new TMyClass(),
       myInhClass = new TMyInhClass();
       
   alert(
      "myClass.getName() = " + myClass.getName() + "\n" +
      "myInhClass.getName() = " + myInhClass.getName() + "\n\n" +
      
      "myClass.name = " + myClass.name + "\n" +
      "myInhClass.name() = " + myInhClass.name
   );
}

The complete code looks like:

JavaScript

<!DOCTYPE HTML>

<html>
<head>
   <title>Sample project</title>
   <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
   <!-- Scripts -->
   <script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
   <script type="text/javascript">
      /**
        * My class
        */
      var TMyClass = AWeb.class({
          public : {
            /**
              * Constructor
              */
            constructor : function( initValue ) {
               this.name = initValue||"A-class";
            },
            
            /**
              * Returns name
              */
            getName : function() {
               return this.name;
            }
         }
      });

      /**
        * My class
        */
      var TMyInhClass = AWeb.class({
          extends : TMyClass,
          public : {
            /**
              * Constructor
              */
            constructor : function() {
               this.super( "B-class" );
            }
         }
      });

      /**
        * Entry point
        */
      function main() {
         var myClass = new TMyClass(),
             myInhClass = new TMyInhClass();
             
         alert(
            "myClass.getName() = " + myClass.getName() + "\n" +
            "myInhClass.getName() = " + myInhClass.getName() + "\n\n" +
            
            "myClass.name = " + myClass.name + "\n" +
            "myInhClass.name() = " + myInhClass.name
         );
      }
   </script>
</body>
</html>

Very simply. I will draw your attention again that private methods and variables are visible only in class methods. The examples use the AWeb Library.

If the article has helped someone, I will tell you about the properties of the classes. I will give examples of protected methods and interfaces of classes in the next article. Thanks for reading.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Member 10277780

CEO student

Russian Federation

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

User-friendly Object Model in JavaScript

Introduction

Other Articles About the Library

License

Comments and Discussions