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:
<!DOCTYPE HTML>
<html>
<head>
<title>Sample project</title>
<!--
<link rel="stylesheet" type="text/css" href="http://a-web.me/styles/default/a-web.css" >
<!--
<script type="text/javascript" src="http://a-web.me/scripts/a-web.js"></script>
</head>
<body>
<script type="text/javascript">
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.
var TMyClass = AWeb.class({
public : {
constructor : function() {
alert( "MyClass constructor" );
}
}
});
function main() {
var myClass = new TMyClass();
}
Let's add the private variable "name" and the public method "getName":
var TMyClass = AWeb.class({
public : {
constructor : function( initValue ) {
this.name = initValue||"A-class";
},
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:
var TMyInhClass = AWeb.class({
extends : TMyClass,
public : {
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:
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:
<!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">
var TMyClass = AWeb.class({
public : {
constructor : function( initValue ) {
this.name = initValue||"A-class";
},
getName : function() {
return this.name;
}
}
});
var TMyInhClass = AWeb.class({
extends : TMyClass,
public : {
constructor : function() {
this.super( "B-class" );
}
}
});
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.
Other Articles About the Library
I decided to link the articles, because there is not much information on the internet
