In
the process of learning JavaScript there always comes a point when you
really want to implement Object Oriented Programming in a very easy
way. There are lots of libraries to accomplish this task, and they
are really straightforward. But sometimes you really need something
even simpler or maybe you want to implement it yourself so that you
really understand the concepts behind it, and this is my case; I
wanted to implement a very simple class system so that I could
understand more about how JavaScript prototype system works and how
to emulate inheritance in a very simple way.
After
surfing the web a bit I run in to John Resig's blog
post
in which he explains how to implement OO programming in JavaScript in
an easy and clean way. So after reading it I decided to implement my
own class system, just for fun, and called it Dummy
Class System
or DCS.
DCS
is a very simple/dummy class system for JavaScript. DCS lets you
implement Object Oriented Programming with ease. As I mentioned
before DCS is influenced by the simple JavaScript inheritance
mechanism implemented by John Resig and is also a bit influenced by
the class system defined by Ext
JS.
Here
is an example of what you can do with DCS:
Define
the class Person
DCS.define('Person', {
property: {
name: '',
lastname: ''
},
constructor: function(name, lastname) {
this.name = name;
this.lastname = lastname;
},
toString: function() {
return 'Name: ' + this.name + ' Lastname: ' + this.lastname;
}
});
The config object (the second parameter of the DCS.define method) contains the methods and properties that will be part of the new class prototype, except for the property config object that you can use to specify default values for instance variables. The property config also tells DCS to generate getters/setters for each instance variable specified in this object. Therefore you can use these generated methods as usual:
// create a new instance of Person
var p1 = new Person("John", "Doe");
console.log(p1.getName()); // prints "John"
console.log(p1.setName("foo")); // sets the name to "foo"
console.log(p1.getName()); // prints "foo"
Define
the Class Worker which extends from Person
DCS.define('Worker', {
extend: 'Person',
property: {
jobTitle: ''
},
constructor: function(name, lastname, jobTitle) {
this._super(name, lastname);
this.jobTitle = jobTitle;
},
toString: function() {
return this._super() + ' Job Title: ' + this.jobTitle;
}
});
One thing to notice here is that you can still have access to an overriden method by using the _super reference, this reference have temporary access to its parent's overriden method.
As
you can see is quite simple to do OO programming with DCS. For more information about the project visit the source code repository at github.
Feel free to download and play with it.
No comments:
Post a Comment