Object Oriented JavaScript

16. Extending Methods

It is all very well inheriting all the properties and methods from one object when creating another but what happens when we want to not just copy an existing method as it currently exists but where we want to extend the functionality of the method by adding to what is already there?

Rather than copying all of the code from the parent method into the child method (which would work until the code in the parent method gets changed) what we really need is a way to be able to access the parent method from within the child method.What we really need is a way of creating a new object by copying another that not only copies the relevant properties and methods to our new object but which also provides a simple way of of accessing the relevant properties and methods of the parent object.

Firstly we need to consider what we really want to copy when copying one object to another. Generally the properties and methods fall into two groups - those that need a separate copy for each object and those that can be shared. Most frequently properties will fall in the first group and methods in the second but there will be exceptions (such as where we want to extend the functionality of a method). The way that we have looked at copying objects in past tutorials references the prototype of the parent object for those things we want to share.

One disadvantage of the way that we have been copying objects in prior tutorials is that we have actually been copying the shared properties and methods by referencing them via the "prototype" at the time of making the copy. Any additions to the protptype of the parent object are not automatically made available to be shared by the child objects. This leaves things somewhat confusing as to what is shared and what isn't when the parent and child objects have additional functionality added at different times.

So what does this sharing issue have to do with extending methods? Well by setting up our own extends method on all our objects and using that to copy objects that need to inherit from other objects we can ensure that all of the shared (protptype) methods and functionsalways stay shared (even if added after the child is created) and we can also create a property within our objects which provides us with a way to access the equivalently named parent method for when we need to extend the functionality of a method.

The following code allows us to create a new object that shares everything in its parent's prototype and also allows access to the parent prototype directly when required.

function extend(C,P) {
var f = function() {};
F.prototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
C.P = p.prototype;
}

Now when we specify extend(child, parent) the child object is created and all the parent objects prototype (shared properties and methods are automatically available to the child object unless the child object subsequently overrides them by creating its own. Where it does override a method and needs to access the method of the same name from the parent object then you simply access the P property of the object which allows direct access to all of the parent's shared properties and methods even where the child object has overridden them.

All the Object Oriented JavaScript Tutorials

1. What is Object Oriented JavaScript?
2. The Benefits of OO JavaScript
3. JavaScript's Built in Objects
4. Extending Built In Objects
5. Creating Objects from Existing Objects
6. Creating New Objects Without Copying Existing Ones
7. Dot Notation and "this"
8. prototype
9. Inheritance and "constructor"
10. Associative Array Notation
11. Create Method if Doesn't Exist
12. "self" and Multiple Objects
13. Defining Objects with JSON
14. Namespaces
15. Lazy Definition
16. Extending Methods
17. Copying Objects
18. Private Properties and Privileged Methods
19. Public Access to Private Methods
20. Chaining Methods
21. Singletons