###############################################################################
# pAjax JavaScript OO Guide #
###############################################################################
# Created: # CopyrightŪ 2005, PontUKom Corp # Updated: #
# 2005-08-16 17:44 # Guilherme Blanco # 2005-09-09 10:32 #
###############################################################################
I will consider that all readers are familiar with OO terminology, meaning that
I won't explain the theory of Object Oriented Programming, like static members,
methods, properties (attributes), etc.
JavaScript Object Oriented programming style works as prototypes, as defined in
ECMAScript 262 Specification.
+-----------------------------------------------------------------------------+
| Static members |
+-----------------------------------------------------------------------------+
The first thing that we'll talk about are static members. As you should know,
static members are properties or functions that can be accessed even if no
instance of the object have been set.
In PHP (I'll follow the PHP5 OO notation), we can create static members like:
[code]
class Foo {
public static $field = null;
public static function getField() { return Foo::field; }
}
[/code]
In JavaScript, we have 2 ways to define static members. They're:
[code]
var Foo = {
field = null,
getField = function () { return Foo.field; }
};
[/code]
Or in this way:
[code]
Foo.field = null;
Foo.getField = function () { return Foo.field; }
[/code]
+-----------------------------------------------------------------------------+
| Constructor |
+-----------------------------------------------------------------------------+
Define constructors in JavaScript are too much similar with PHP4 way. The main
difference between constructors in PHP and in JS is that inside JS there're no
class declaration, so the "class Foo {" does not exist. Instead, the objects
are created based in the existance of methods or properties. There is no way to
difference a JS class from a function, except if you look closely to its
content (defined members). If only local variables are created (and no "this"
reference could be found), it's a function and not a class.
We're advancing too much from our real intention in this section. Let's check
how to create a constructor:
[code]
function Foo() {
this.member = 1234;
}
[/code]
As you can see, it's an object definition (look at "this" reference inside it).
But, JS OO is based in prototypes, as I said in the beginning of the tutorial.
+-----------------------------------------------------------------------------+
| Properties |
+-----------------------------------------------------------------------------+
This is not the only way to check if the function generates an object or a
simple execution. As I said in the beginning of this tutorial, JS OO uses
prototypes to define classes. The same object defined in the previous section
could also be defined as the following code:
[code]
function Foo () {}
Foo.prototype.member = 1234;
[/code]
Now you can see why I told you prototypes. But the idea of JavaScript is to
build an Object using prototypes, I mean... everything that is defined as
"myObject.prototype", will be part of instance, and only of it, couldn't be
accessed as a static member (that is accessed like this: nameOfObject.member).
The idea of prototypyed members is to be accessed only when instantiate and
only by the respective object, I mean:
[code]
alert(myObject.member); // member doesn't exist, so it'll produce an error
var obj = new myObject;
alert(obj.member); // it'll display an alert with the value 1234
[/code]
+-----------------------------------------------------------------------------+
| Methods |
+-----------------------------------------------------------------------------+
To define non-static methods, it's too much similar to members...
[code]
// ...
myObject.prototype.write = function () {
alert('I\'m displaying myObject method write');
}
[/code]
+-----------------------------------------------------------------------------+
| Inheritance |
+-----------------------------------------------------------------------------+
JavaScript supports Simple Inheritance. It means that an object can inherits
from another, but one object never can inherit from more than one object at the
same time.
To control this, you can do this: C inherits from B and B inherits from A.
But how can I practically do it? extends (like Java syntax)? No... to create
inheritance in JavaScript, it's kind of tricky and we need to explicit define it
in two places:
1- Constructor
2- Prototypes
So, to do "B inherits from A", we could do this:
[code]
function A() {
this.name = "Guilherme";
}
A.prototype.write = function () { alert(this.name); }
function B() {
A.call(this);
this.lastName = "Blanco";
}
var _p = B.prototype = new A;
_p.write = function() {
alert(this.name + " " + this.lastName);
}
[/code]
The "A.call(this);" it's the base constructor call of A class. So, everything
defined in constructor of class A will be executed in B constructor too.
Also, the line: var _p = B.prototype = new A;
Means to apply all members from A and members from B... to inherit members and
methods. The prototype attribution in the variable _p is used to simplify the
coding, and I recommend to everyone to use this methodology.
With this we conclude our simple OO JavaScript tutorial... I hope that this
help you to programm using the RPC class.
|
Download
