Entry
JavaScript: Object oriented: How to possibly create classes and objects in JavaScript?
Jan 15th, 2005 18:49
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 16 January 2005 - 02:32 am --------------------
JavaScript: Object oriented: How to possibly create classes and
objects in JavaScript?
The idea is to store the functions used in your class as nested
functions
(that is functions in functions), which makes them private.
Using the 'this' parameter you make the involved nested functions
public.
Thus:
1. -Create your class, by using the 'function' keyword,
followed by a name and zero or more parameters.
2. -Create 'private' properties, by declaring them inside your
function
3. -To possibly create read only 'public' properties, create a private
'get' function for it, which you then make a 'public' function.
4. -To possibly create 'public' properties which you can set,
create a private 'set' function for it, which you then make
a 'public' function.
5. -Create 'private' functions, by nesting them in your function
6. -To possibly create public functions, create a new function name
and put 'this.' in front of it. You can then call this new
function name.
---
---
Steps: Overview:
1. -Save first listing as 'myclassname.js'
2. -Save second listing as 'myclassnameapplication.html'
3. -Open your browser
1. Load the file 'myclassnameapplication.html'
---
---
Steps: Worked out:
1. -Save first listing as 'myclassname.js'
--- cut here: begin --------------------------------------------------
function MyClassName( parameterA, parameterB ) {
//
// --- Object Properties: private --- //
//
propertyR = "propertyR is read only. (because no set procedure
defined for it)";
//
// --- Object Initialization: private properties --- //
//
propertyA = parameterA;
propertyB = parameterB;
//
// --- Method Pointers: public methods --- //
//
// this.<your public function> = <your private nested function>
//
this.FNgetPropertyA = FN_getPropertyA;
this.FNgetPropertyB = FN_getPropertyB;
this.FNgetPropertyR = FN_getPropertyR;
//
this.PROCsetPropertyA = PROC_setPropertyA;
this.PROCsetPropertyB = PROC_setPropertyB;
//
//
this.PROCdoSomeAction1 = PROC_doSomeAction1;
//
// --- Methods --- //
//
// --- Methods: public: get --- //
function FN_getPropertyA() {
return( propertyA );
}
function FN_getPropertyB() {
return( propertyB );
}
function FN_getPropertyR() {
return( propertyR );
}
//
// --- Methods: public: set --- //
//
function PROC_setPropertyA( para ) {
propertyA = para;
}
function PROC_setPropertyB( para ) {
propertyB = para;
}
//
// --- Methods: private --- //
//
function FN_aPrivateMethodS() {
return( "FNaPrivateMethodS() is a private method" );
}
//
// --- Methods: do something --- //
//
function PROC_doSomeAction1() {
alert( FN_aPrivateMethodS() + " " + this.FNgetPropertyR() );
}
}
--- cut here: end ----------------------------------------------------
2. -Save second listing as 'myclassnameapplication.html'
--- cut here: begin --------------------------------------------------
<HTML>
<!--- --->
<HEAD>
<!--- --->
<SCRIPT
LANGUAGE="JavaScript"
SRC="myclassname.js">
</SCRIPT>
<!--- --->
<SCRIPT
LANGUAGE=
"JavaScript"
>
//
// object declaration and instantiation
//
var myobjectnameO = null;
myobjectnameO = new MyClassName( "A", "B" );
//
// accessing the newly created object methods
//
alert( myobjectnameO.FNgetPropertyA() ); // displays "A"
//
alert( myobjectnameO.FNgetPropertyB() ); // displays "B"
//
myobjectnameO.PROCsetPropertyA( "Y" );
//
myobjectnameO.PROCsetPropertyB( "Z" );
//
alert( myobjectnameO.FNgetPropertyA() ); // displays "Y"
//
alert( myobjectnameO.FNgetPropertyB() ); // displays "Z"
//
// displays PROCaPrivateMethod() is a private method
myobjectnameO.PROCdoSomeAction1();
//
// display 'undefined' -- as propertyB is private
// propertyR is read only
//
alert( myobjectnameO.propertyB );
//
// fails, FNaPrivateMethodS() is private.
//
alert( myobjectnameO.FNaPrivateMethodS() );
//
</SCRIPT>
<!--- --->
</HEAD>
<!--- --->
<BODY>
<!-- your body tags here -->
</BODY>
<!--- --->
</HTML>
--- cut here: end ----------------------------------------------------
3. -Open your browser
1. Load the file 'myclassnameapplication.html'
---
---
Magazine: see also:
---
[magazine: source: dr. Dobb's journal - August 2001 - p. 18 'Is
JavaScript an object oriented language?']
---
---
Internet: see also:
---
JavaScript: Object oriented: Class: Link: Overview: Can you give an
overview of links?
http://www.faqts.com/knowledge_base/view.phtml/aid/33407/fid/307
----------------------------------------------------------------------
