Login   Register  
PHP Classes
elePHPant
Icontem

File: docs/JS_OO.txt

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Guilherme Blanco  >  pAjax  >  docs/JS_OO.txt  >  Download  
File: docs/JS_OO.txt
Role: Documentation
Content type: text/plain
Description: JS OO Tutorial
Class: pAjax
Do RPC calls from the browser without page reloads
Author: By
Last change:
Date: 9 years ago
Size: 6,169 bytes
 

Contents

Class file image Download
###############################################################################
# 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.