Object Oriented JavaScript

12. "self" and Multiple Objects

One problem with referencing the current object using "this" is knowing what the current object is when those references are run. Everything is relatively straightforward if all your object method calls are directly within the one piece of JavaScript. Things become more complicated where methods are attached to event handlers.

The problem is that while browsers that run JavaScript will recognise that references to "this" within a method belonging to a specific object are references to the object that the method belongs to, browsers that run JScript (Internet Explorer) will associate "this" with the object that the event handler is attached to rather than to the object that the method belongs to. So we have two different objects that "this" might refer to depending on which particular browser that the code is running in - not something that we want to happen.

What this means is that we can't use "this" to reference the current object within methods that might be called from event handlers since in those cases we do not know which object "this" will refer to and so the code isn't going to work in all browsers. There is however a simple solution to the problem.

What we need to do to resolve this problem is to set up an alias for "this" within the object that will always refer to the object regardless of how the methods of the object are called. It is common to call this alias "self" since that name provides us with a useful reminder of what it is referring to. To assign this alias all we need is one line of code in the constructor for our object that reads:

var self = this;

We can then replace all of the references to "this" within our object with references to "self" instead and then we will be certain that all of the references intended to refer to the current object actually do refer to that object. At least that would work except that by defining "self" that way it is only defined for the constructor (which doesn't really need it) and isn't defined from within the methods (where it is needed).

So what we need to do is a little more work so as to pass "self" to all of the methods belonging to the object so that they can reference back to the object that the method belongs to properly.The simplest way to do this that actually works is to always pass "self" as a parameter into all of the methods so that even when the method is called in JScript from an event handler and therefore gets treated as being attached to the object that called the event rather than to the object that it really belongs to the "self" argument will still refer to the correct object and our code will work as we expect.

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