PDA

View Full Version : OOP with Javascript



neshaug
8 Oct 2007, 5:00 AM
My background is only java programming, and I got a good feeling when I finaly understood how OOP in javascript with public and private areas work. :)

The only question I have is, why the extra parenthesis in the end after a anonym function wich simulates private and public areas?

var o = (function() {
return {p1:11, p2:22};
})();

I understand that o becomes and object with a anonym function and that only the object in the return statement has access to the private area (anonym function). The only thing I do not understand is the (); at the end, I know the program won't run without it, but what does it do? Is it like an anonym function wrapped in a function that is not declared? :((

Is this a good way to make new objects of the anonym function, and is this a good way to
implement a constructor to it?

function person(name, age){
var properties = (function(){
var name, age;
return {
init: function(inputName, inputAge){
name = inputName;
age = inputAge;
}
// constructor
properties.init(name, age);
})();
}

var aPerson = new person("Jack", "Black");

Thank you.

fangzhouxing
8 Oct 2007, 5:39 AM
You can know better from link:

http://www.thinksharp.org/?p=72

neshaug
8 Oct 2007, 6:01 AM
That was a okay rundown, though instead of using an anonymous function he used a declared function and wrote "this" in front of every variabel. I think the anonymous pattern of doing it works better.

In his first example he is also using the (); in the end, but he doesn't explain why.. Probably because it so straight forward I shouldn't be alowed to ask, but that's just how my brain works .. :)

Ah! I think i got it now! :) it is like declaring a function and running it straight away. Because it's anonymous it would be impossible to run it in a later state.. Did I get it?

RWaters
8 Oct 2007, 6:22 AM
neshaug, you are correct with your last statement in that the extra parenthesis are used to make it run immediately, and since it is an anonymous function it can never be explicitly called again. You'll find this technique used quite a bit throughout Ext and various other OO javascript frameworks.

neshaug
8 Oct 2007, 6:44 AM
Thank you Rwaters.

I'll get my head in extjs 2.0 again, with a better understanding of the fundamental script syntax.

redgrey
8 Oct 2007, 7:05 AM
indeed it's just a singleton pattern, cause



var MySingleton = function(){
return {
id : 1,
test : function(){ return this.id; }
}
}();




function myFakeClass(){
return {
id : 1,
test : function(){ return this.id; }
}
};
var myInstance = new myFakeClass();


produces pretty the same. so if u need multiple instances of one Object/Class u should consider the second structure...
haven't used it too much myself yet, but probably will need it pretty soon

Greenosity
8 Oct 2007, 7:25 AM
Can anyone suggest any books that describes in detail the methods used by Ext and other OO JavaScript frameworks?

I've been using JavaScript for years but always doing things in the old-fashioned, straightforward way (global vars, global functions) and I'm a little ashamed to admit that it's been a bit tough to get my head around some of the things Ext is doing simply because I didn't know you could do things like that in JavaScript. It's hard to picture in my mind what is really going on in some cases. I've had lots of experience with C++ and C#, and a little Java, and since the syntax of those languages make OO design easy (well, maybe not C++) , it's not an issue to easily design OO code. However, some of the constructs I see used in JavaScript are completely foreign to me (in JavaScript, that is) - so where are these types of things documented? Or, is OO design in JavaScript more of a "hack" that developers discovered over time.

RWaters
8 Oct 2007, 7:42 AM
I've not really looked at any recent javascript books, but I don't recall any that explained OO JS very well.

Here's a couple good articles to help get you started:
http://www.sergiopereira.com/articles/advjs.html
http://www.jibbering.com/faq/faq_notes/closures.html

fangzhouxing
8 Oct 2007, 9:33 PM
I've been using JavaScript for years but always doing things in the old-fashioned, straightforward way (global vars, global functions) and I'm a little ashamed to admit that it's been a bit tough to get my head around some of the things Ext is doing simply because I didn't know you could do things like that in JavaScript.

Yes, I had the same experience with you.

I recommend following resources:
1.http://www.nirvanastudio.org/javascript/javascript-the-worlds-most-misunderstood-programming-language.html
2.Book: Pro JavaScript Techniques
3.Book: JavaScript: The Definitive Guide, 5th Edition
(Chapter 9. Classes, Constructors, and Prototypes)
4.http://www.dustindiaz.com/javascript-scope-adjustment/
5.http://www.digital-web.com/articles/scope_in_javascript/
6.http://dhtmlkitchen.com/learn/js/singleton/
7.http://www.thinksharp.org/?p=72
8.http://www.thinksharp.org/?p=71
9.http://www.dustindiaz.com/javascript-private-public-privileged/
10.http://www.litotes.demon.co.uk/js_info/private_static.html
11.http://www.crockford.com/javascript/private.html
12.http://www.dustindiaz.com/awkward-looking-javascript/
13.http://yuiblog.com/blog/2007/06/12/module-pattern/
14.http://www.thinksharp.org/?p=76

dantheman
9 Oct 2007, 12:46 PM
Slightly older, but very good are Gavin Kistner's tutorials:

OOP in JS, part I (http://phrogz.net/JS/Classes/OOPinJS.html)

OOP in JS, part II (http://phrogz.net/JS/Classes/OOPinJS2.html)

Extending JavaScript Objects and Classes (http://phrogz.net/JS/Classes/ExtendingJavaScriptObjectsAndClasses.html)

--dan

kape123
9 Oct 2007, 2:32 PM
I tried reading almost everything to learn JS and just couldn't find right resource... then someone on this forums mentioned video tutorials by Douglas Crockford, I Googled a bit, and after watching them I can safely say that they are THE BEST WAY to learn JavaScript (and DOM if you want), particularly if you already have programming background and don't want to read through ton of materials just to get useful stuff.

So just open up this link (http://www.metafilter.com/61049/Douglas-Crockford-Teaches-JavaScript), choose 'The JavaScript Programming Language' lesson 1, sit back, and enjoy. Crockford talks a bit annoying but lessons are pure gold.

neshaug
9 Oct 2007, 11:44 PM
Yeah, I agree kape123! :)

RedGrey: If I want to be able to produce multiple instances and at the same time use private and public areas, I can not use the second pattern.

I have to combine both patterns.

function MyFakeClass(){
var propertiesOfMyFakeClass = (function(){
var private;
return {
getPrivate: function(){
return private;
}
}
})();
// Returns when constructed
return propertiesOfMyFakeClass;
}

Then new "fakeClass = new MyFakeClass();" will produce new instances of your first pattern, using the second pattern.

Is it a good way to do it? What are the pros and cons?