Question

我正在用JavaScript构建一个滑块/推子。我通过以前从未实际使用过的方式使用JavaScript，因此声明了一个对象：

var Object
{
    // Statements & functions.
}

我在对象内部从函数（testing）中检索变量（change_slide()）的值时遇到问题。我有这段代码：

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();

这是我的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>

对于记录“点数”是滑块底部的小圆圈，您可以单击以更改幻灯片。

那么，任何人都可以告诉我为什么testing返回undefined，以及如何让我当前的代码检索testing的实际值？

Answer 1

addEventListener调用你给它的函数，this指向DOM元素，而不是你的类的实例，所以这一行（和其他类似的）是问题所在：

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

有几种方法可以解决这个问题，例如：

initialize: function() {
    var self = this;

    // ...

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

    // ...
},

或者在启用ES5的环境中（或者如果你加载了ES5垫片，因为这是可以填充的），你可以使用新的Function#bind：

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

更多（在我的博客上）：

JavaScript“this.variable”在一个实例中返回undefined，而不是另一个实例

1 个答案: