PHP Classes

File: docs/JS_OO.txt

Recommend this page to a friend!
  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: 18 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.