Sunday, April 30, 2006

Java Script OOPS

This post is an extract from a site given below. It covers how objects , functions can be used to do Object oriented programming in Java Script.

Objects

There are two basic ways to create an object:

var obj = new Object();

And...

var obj = {}; // knonw as object literal syntax

Once created, an object's properties can again be accessed in one of two ways:

obj.name = "tester"
var name = obj.name;

And...

obj["name"] = "tester";
var name = obj["name"];

These are also semantically equivalent.The second method has the advantage that the name of the property is provided as a string, which means it can be calculated at run-time.It can also be used to set and get properties with names that are reserved words:

obj.for = "Simon"; // Syntax error
obj["for"] = "Simon"; // works fine


Functions

JavaScript lets you create anonymous functions.

var avg = function() {
var sum = 0;
for (var i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum / arguments.length;
}

This highlights a potential problem with anonymous functions: how do you call them recursively if they don't have a name? The answer lies with the arguments object, which in addition to acting as a list of arguments also provides a property called arguments.callee. This always refers to the current function, and hence can be
used to make recursive calls

Inner functions

JavaScript function declarations are allowed inside other functions.

function betterExampleNeeded() {
var a = 1;
function oneMoreThanA() {
return a + 1;
}
return oneMoreThanA();
}

Closures

function makeAdder(a) {
return function(b) {
return a + b;
}
}
x = makeAdder(5);
y = makeAdder(20);
x(6)
?
y(7)
?

The name of the makeAdder function should give it away: it creates new 'adder' functions, which when called with one argument add it to the argument that they were created with.

Custom objects

first way
------------

function makePerson(first, last) {
return {
first: first,
last: last
}
}
function personFullName(person) {
return person.first + ' ' + person.last;
}
function personFullNameReversed(person) {
return person.last + ', ' + person.first
}

second way
-------------
function makePerson(first, last) {
return {
first: first,
last: last,
fullName: function() {
return this.first + ' ' + this.last;
},
fullNameReversed: function() {
return this.last + ', ' + this.first;
}
}
}

third way
------------
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = function() {
return this.first + ' ' + this.last;
}
this.fullNameReversed = function() {
return this.last + ', ' + this.first;
}
}
fourth way
-------------
function personFullName() {
return this.first + ' ' + this.last;
}
function personFullNameReversed() {
return this.last + ', ' + this.first;
}
function Person(first, last) {
this.first = first;
this.last = last;
this.fullName = personFullName;
this.fullNameReversed = personFullNameReversed;
}

fifth way , prototype way
------------------------------
function Person(first, last) {
this.first = first;
this.last = last;
}
Person.prototype.fullName = function() {
return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
return this.last + ', ' + this.first;
}

prototype expalnation
------------------------
Person.prototype is an object shared by all instances of Person. It forms part of a lookup chain: any time you attempt to access a property of Person that isn't set, JavaScript will check Person.prototype to see if that property exists there instead. As a result, anything assigned to Person.prototype becomes available to all instances of that constructor via the this object.

This is an incredibly powerful tool. JavaScript lets you modify something's prototype at any time in your program, which means you can add extra methods to existing objects at runtime:Interestingly, you can also add things to the prototype of built-in JavaScript objects.

Source : http://simon.incutio.com/slides/2006/etech/javascript/js-reintroduction-notes.html

Comments: Post a Comment

Subscribe to Post Comments [Atom]





<< Home

This page is powered by Blogger. Isn't yours?

Subscribe to Comments [Atom]