Javascript: attaching OOP methods to events and the 'this' keyword

event-handling, javascript, oop, this

Solution

One thing I notice is that neither `init` nor `scroll` is a method on the instance.

So you only need to add `init` and not `this.init` to the load event:

addEvent(window,'load',init); // No "this." needed

And similarly:

addEvent(window,'scroll',scroll);

If you do decide to move them to the class (eg `this.scroll` and `this.init` etc), you can save a reference to `this` and refer to it in an anonymous function passed to `addEvent`:

var self = this;

this.init = function() {
    addEvent(window, 'scroll', function() {
        self.scroll()
    })
};

this.scroll = function() { /* ... */ };

addEvent(window,'load',function() {
    self.init()
});

This is called a closure.

Problem

I am new to OOP Javascript and am having trouble with the `this` keyword and events. What I'm trying to achieve is: I have multiple DOM objects and want to not only bind a common event to them, but keep some data about the aforementioned objects in a global container (to increase runtime performance). So what I do is basically this: ``` function ClassThatDoesSomething() { /* keeps node ids for processing in this.init */ this.nodes = new Array(); /* keeps processed node data for fast access */ this.nodeData = new Array(); this.sthAddNodes = function(/* ids */) { /* appends node ids to local variable (this.nodeData) */ } function init() { /* gathers data from all nodes that were added before and stores it in this.nodeData */ /* here, unsurprisingly, 'this' references the window element*/ addEvent(window,'scroll',this.scroll); } function scroll() { /* do stuff when user scrolls the page */ /* 'this' references the window element here too */ } addEvent(window,'load',this.init); } ``` Later, in the document body, I could just add this: ``` var Ctds = new ClassThatDoesSomething(); ``` And further on, add DOM elements by: ``` Ctds.addNodes(ids); ``` No further implementation code would be required. QUESTION: How to access the JS class instance in the `init` and `scroll` methods and not the window element. It doesn't have to be through the `this` keyword, I know, but still I didn't come up with anything. P.S. - `addEvent` is an extremely basic function to attach events, it's just IE/Fx friendly and does nothing else. - The code I'm writing is already functional, but in procedural form, I just wanted to OOP'd it. - As a minor sub-question, I got the impression somehow, that getter/setter methods are discouraged in javascript, is it okay if I use them?

Original source