coder and technology lover
Object oriented programming in Javascript
After several approaches, I finally found an elegant and functional solution to use Javascript in an OOP way, without use third party libraries or use particular tricks.
The objectives I had in mind was:
- Realize a Java/Actionscript-like class
- Provide a constructor for the class
- Implementing public method
- Implementing private method
- Ensure encapsulation (class properties can’t be changed by assigning a value to the relative instance’s property)
Honestly, I don’t know if this approach has some weakness point nor if is been already adopted by someone, but I’m pretty satisfied with it and I want to share the technique behind.
My Javascript classes looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | function MyClass(arg1, arg2, arg3, arg4) { // Private class properties declaration var _propertyName1, _propertyName2, _propertyName3, _propertyName4; // Constructor var MyClass = function() { // assign values to properties _propertyName1 = arg1; _propertyName2 = arg2; _propertyName3 = arg3; _propertyName4 = arg4; // do eventually initialization stuff... } // Private method (can be used only inside MyClass) var privateMethod1 = function() { // do something helpful... } // Public setter method this.setProperty1 = function(value) { _propertyName1 = value; } // Public getter method this.getProperty1 = function() { return _propertyName1; } // Calls the constructor automatically MyClass(); } |
In this way when I will initialize an instance of “MyClass” (var mc = new MyClass()), the constructor will be automatically called and “mc” will have access only to setProperty1() and getProperty1() methods, because they have a “this” scope and not a “var” declaration, other stuff with “var” are so obscured to the instance. Anyway nothing can’t prevent the user to set property directly to the instance (mc._propertyName1 = value), but in that way the user is not setting the class property, rather is defining a new property on the instance, my desired property is safely encapsulated in the class and if the user wants to change its value he must use the provided setter method. For that concerning to the constructor (var MyClass), it would seems a bit “stupid” because the function “MyClass” is a constructor its self, anyway i find that this help me to maintain my js class in order and more readable.
Safety of encapsulation can be tested in this way:
1 2 3 4 5 6 | var mc = new MyClass(); mc.setProperty1("setter value assignment"); mc._propertyName1 = "direct value assignment"; alert(mc.getProperty1()); |
The alert will show “assignment”, mc._propertyName1 = “direct value assignment” hasn’t modified the class property!
Of course if we alert “mc._propertyName1″ we will get “direct value assignment”, but that’s another story… if we use properly getter/setter methods we can ensure a working encapsulation.
| Print article | This entry was posted by Davide Zanotti on 10, Tuesday f, 2009 at 9:53 am, and is filed under javascript. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |