JavaScript "this.variable" returns undefined in one instance, but not another

Question

I'm building a slider/fader in JavaScript. I'm using JavaScript in a way I've never actually used it before by declaring an object thusly:

var Object
{
    // Statements & functions.
}

I'm having an issue retrieving the value of a variable (testing) inside the object from a function (change_slide()) also inside the object. I have this code:

var Fader = 
{
    // Fader properties.
    speed: 1,                                   // The time each interval will take.
    fade: 0.1,                                  // How much to change the slides opacity with each interval.
    divs: ["fade_1", "fade_2", "fade_3"],       // Array.
    callbacks: [],                              // Array.
    testing: 0123456798,

    // Initialise fader.
    initialise: function()
    {
        // Randomise the starting slide.
        this.start_div = Math.floor((Math.random() * this.divs.length) + 1);

        // Add pips and initialise display (block or none) for the slides.
        for(var i = 0; i < this.divs.length; i++)
        {
            /*
            *       Create pips.
            */
            var new_pip = document.createElement("div");

            new_pip.className = "item";
            new_pip.id        = "pip_" + (1 + i);
            document.getElementById("pips").appendChild(new_pip);

            /*
            *       Get current div number.
            */
            var extract_div_number = this.divs[i].replace("fade_", "");

            if(extract_div_number == this.start_div)
            {
                //this.current_slide = extract_div_number;

                document.getElementById("fade_" + extract_div_number).style.display = "block";
            }
            else
            {
                document.getElementById("fade_" + extract_div_number).style.display = "none";
            }
        }

        this.pip_controller();
    },

    pip_controller: function()
    {
        for(var i = 0; i < this.divs.length; i++)
        {
            this.callbacks[i] = this.add_event("pip_" + (1 + i));
        }
    },

    add_event: function(item)
    {
        if(window.addEventListener)
        {
            return document.getElementById(item).addEventListener("click", this.change_slide, false);
        }
        else
        {
            return document.getElementById(item).attachEvent("onclick", this.change_slide);
        }
    },

    change_slide: function()
    {
        // Always returns "undefined" despite 'testing' being defined previously.
        console.log(this.testing);
    },
}

Fader.initialise();

// This works:
// Fader.change_slide();

This is my HTML:

<div id="main_slide">

    <div id="fade_1"><h1>Slide 1</h1></div>
    <div id="fade_2"><h1>Slide 2</h1></div>
    <div id="fade_3"><h1>Slide 3</h1></div>

    <div id="pips"></div>

</div>

For the record "pips" are those little circle things at the bottom of the slider you can click to change slides.

So, can anybody tell me why testing is returning undefined, and how I can make my current code retrieve the actual value of testing?

Answer 1

addEventListener calls the function you give it with this pointing at the DOM element, not the instance of your class, so this line (and others like it) is the problem:

return document.getElementById(item).addEventListener("click", this.change_slide, false);

There are a couple of ways to deal with that, for instance:

initialize: function() {
    var self = this;

    // ...

    return document.getElementById(item).addEventListener("click", function(e) {
        return self.change_slide(e);
    }, false);

    // ...
},

Or in an ES5-enabled environment (or if you have an ES5 shim loaded, because this is shim-able), you can use the new Function#bind:

return document.getElementById(item).addEventListener("click", this.change_slide.bind(this), false);

More (on my blog):

• Mythical methods
• You must remember this