In continuing prototyping, I’ve been introducing myself to Object Oriented JavaScript. My exercise? To develop a system of changing text displayed on the screen through use of objects and closures. I’ve been reading up on theory since September but this was a real feet-wetting: my first advanced JavaScript and not all of it worked.
I decided to go with 2 classes: TimedText and TimedTextManager. For those familiar with patterns, they’re in a composition relationship. For those who aren’t: TimedTextManager is responsible for containing and handling all interactions with TimedText. TimedText represents some text to display after a certain delay.
This test code was really quick and messy, but it got things done. I ran into some issues and as a result it’s no where near as elegant as I’d hoped. The biggest issue is resolving scope within the TimedTextManager.play function. Whether the prototype function declaration was placed inside the TimedTextManager constructor or after it, Firefox’s JS compiler issues errors about being unable to resolve class-level variables. As a result, variables were duplicated to being local within the TimedTextManager.play function rather than the original declarations within the constructor itself (Commented out code shows the original declarations).
The changes outlined above have produced a working but not workable solution. Perhaps a closure within a function of an object prototype results in unforeseen scope resolution? I wonder if anyone can shed any light on this.