If you have done Object Oriented Programming in JavaScript, you will
know that you can create a class as follows:
Person = function(id, name, age){
this.id = id;
this.name = name;
this.age = age;
alert('A new person has been accepted');
}
So far our class person only has two properties and we are going to
give it some methods. A clean way of doing this is
to use its 'prototype' object.
Starting from JavaScript 1.1, the prototype object was introduced in
JavaScript. This is a built in object that
simplifies the process of adding custom properties and methods to all
instances of an object.
Let's add 2 methods to our class using its 'prototype' object as
follows:
Person.prototype = {
/** wake person up */
wake_up: function() {
alert('I am awake');
},
/** retrieve person's age */
get_age: function() {
return this.age;
}
}
Now we have defined our class Person. What if we wanted to define
another class called Manager which inherits some properties from
Person. There is no point redefining all this properties again when we
define our Manager class, we can just set it to inherit from the class
Person.
JavaScript doesn't have built in inheritance but we can use a
technique to implement inheritance as follows:
`Inheritance_Manager = {};`//We create an inheritance manager class
(the name is arbitrary)
Now let's give our inheritance class a method called extend which
takes the baseClass and subClassas arguments.
Within the extend method, we will create an inner class called
inheritance function inheritance() { }. The reason why we are using
this inner
class is to avoid confusion between the baseClass and subClass
prototypes.
Next we make the prototype of our inheritance class point to the
baseClass prototype as with the following code:
inheritance.prototype = baseClass. prototype;
Then we copy the inheritance prototype into the subClass prototype as
follows: subClass.prototype = new inheritance();
The next thing is to specify the constructor for our subClass as
follows: subClass.prototype.constructor = subClass;
Once finished with our subClass prototyping, we can specify the next
two lines of code to set some base class pointers.
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
Here is the full code for our extend function:
Inheritance_Manager.extend = function(subClass, baseClass) {
function inheritance() { }
inheritance.prototype = baseClass.prototype;
subClass.prototype = new inheritance();
subClass.prototype.constructor = subClass;
subClass.baseConstructor = baseClass;
subClass.superClass = baseClass.prototype;
}
Now that we have implemented our inheritance, we can start using it to
extend our classes. In this case we are going to
extend our Person class into a Manager class as follows:
We define the Manager class
Manager = function(id, name, age, salary) {
Person.baseConstructor.call(this, id, name, age);
this.salary = salary;
alert('A manager has been registered.');
}
we make it inherit form Person
Inheritance_Manager.extend(Manager, Person);
If you noticed, we have just called the extend method of our
Inheritance_Manager class and passed the subClass Manager in our case
and then the baseClass Person. Note that the order is very important
here. If you swap them, the inheritance
will not work as you intended if at all.
Also note that you will need to specify this inheritance before you
can actually define our subClass.
Now let us define our subClass:
We can add more methods as the one below. Our Manager class will
always have the methods and properties defined in the Person class
because it inherits from it.
Manager.prototype.lead = function(){
alert('I am a good leader');
}
Now to test it let us create two objects, one from the class Person
and one from the inherited class Manager:
var p = new Person(1, 'Joe Tester', 26);
var pm = new Manager(1, 'Joe Tester', 26, '20.000');
Feel free to get full code and more comments at:
http://www.cyberminds.co.uk/blog/articles/how-to-implement-javascript-inheritance.aspx
--
To view archived discussions from the original JSMentors Mailman list:
http://www.mail-archive.com/jsmentors@jsmentors.com/
To search via a non-Google archive, visit here:
http://www.mail-archive.com/jsmentors@googlegroups.com/
To unsubscribe from this group, send email to
jsmentors+unsubscr...@googlegroups.com
