Click here to Skip to main content
Click here to Skip to main content

User-friendly object model in JavaScript

, 25 Sep 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
User-friendly object model in JavaScript.

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 simpler way. Let's create the project:

<!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.
/**
  * 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":
/**
  * My class
  */
var TMyClass = AWeb.class({
    public : {
      /**
        * Constructor
        */
      constructor : function( initValue ) {
         this.name = initValue||"A-class";
      },
      
      /**
        * Returns name
        */
      getName : function() {
         return this.name;
      }
   }
});
I pay your attention 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: 
/**
  * 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:

/**
  * 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
   );
} 

Complete code looks like:

<!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 pay your attention again that private methods and variables are visible only in a 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. 

Other articles about the library

Decided to join the articles, because there is not much information in internet

License

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

Share

About the Author

Member 10277780
CEO student
Russian Federation Russian Federation
No Biography provided

Comments and Discussions

 
General5 from me. PinprofessionalFla_Golfr26-Sep-13 6:35 
GeneralYou got my 5 PinmemberShakeel Iqbal26-Sep-13 2:11 
GeneralMy vote of 5 Pinmembervelumani.palaniappan20-Sep-13 5:16 
GeneralMy vote of 5 PinmemberVolynsky Alex17-Sep-13 12:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.141030.1 | Last Updated 25 Sep 2013
Article Copyright 2013 by Member 10277780
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid