Question

好的，我相信这有一个非常简单的解决方案，但我的搜索没有任何结果，我确信我误解了一些非常简单的事情。

我想要做的就是创建一个包含2个方法的对象，例如initialise（）和zoom（），在初始化结束时我想调用zoom方法，初始化设置实例变量就像这样'。 width = 100'，问题是如果我声明缩放就不能从intialise（）调用zoom（）

this.zoom = function() {...};

如果我这样声明：

function zoom() {...};

我可以从初始化调用它但是当我尝试使用实例变量它们返回为未定义时，我也尝试将该方法定义为原型，但是当我从外部调用它时，它与第一种方法有同样的问题对象一切按预期工作，但是当我尝试从另一个方法调用该方法时，firebug告诉我该方法不存在。

正如我所说，我确定有一个简单的解释，请参阅下面的源代码列表了解更多详情，非常感谢任何帮助，谢谢。

我相信更有经验的人会在这段代码中看到一大堆问题，尝试在javascript中学习oop是一个很好的学习练习（如果你不介意我这么说，这是非常奇怪的）但是如果可能的话，请让我们处理手头的问题，不要在其他问题上陷入困境，毫无疑问，我会在另一个线程中与他们一起回来。

function maplocation(x, y, width, height, text, id, filename, from, to, folder)
{
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.text = text;
    this.id = id;
    this.canvasID = id + "canvas";
    this.containerID = id + "container";
    this.ctx;
    this.isZoomed = false;
    this.filename = filename;

    this.addLocation = function(element)
    {
        if(supports_canvas())
        {
            // insert location html
            var returnHTML = 
            '<div id="'+this.containerID+'" style="z-index:5; position:absolute; top:' + this.y + 'px; left:' + this.x + 'px">'+
                '<canvas id="' + this.canvasID + '" width="' + this.width +'" height="' + this.height + '" style="position:absolute; top:0px; left:0px">' +
                '</canvas>' +
                '<div id="' + this.id + '" style="text-align:center; padding:15px; position:absolute; top:0px; left:0px; width:' + (this.width - 30) + 'px; height:' + this.height + 'px; cursor:pointer">' +
                    text +  
                '</div>' +
            '</div>';

            $("#"+element).append(returnHTML);

            // draw into canvas
            this.ctx = document.getElementById(this.canvasID).getContext("2d");
            this.ctx.strokeStyle = "rgb(0, 0, 0)";
            this.ctx.fillStyle = "rgba(255, 255, 255, 0.65)";
            this.ctx.lineWidth = 2.2;
            this.roundRect(this.ctx, 5, 5, this.width-10, this.height -10, 15);

            // attach events
            var e = document.getElementById(this.containerID);
            e.addEventListener("click", this.onClick, false);
        }
    }

    this.zoomIn = function()
    {
        alert(this.filename); // THIS IS THE PROBLEM, I WANT TO ACCESS INSTANCE VARIABLE FROM THIS FUNCTION
        $("#theGarden").jsMovie("destroy");

        $('#theGarden').jsMovie({
            sequence: filename,
            from: from,
            to: to,
            folder : folder,  
            showPreLoader : false,
            repeat : false,
            fps: 10,
            loadParallel: 1,
            width: 960,
            height: 529
        });
        $("#theGarden").jsMovie('play',0,15);
        //$("#theGarden").jsMovie("gotoFrame",to);
        //$("#theGarden").jsMovie("pause");
    }

    this.onClick = function(f)
    {
        this.zoomIn(); // THIS IS THE INTERNAL CALL THAT FAILS
    }

    function supports_canvas() 
    {
        return !!document.createElement('canvas').getContext;
    }

    this.roundRect = function(ctx, x, y, w, h, r) 
    {
        var mid = w/2;
        var baseOff = 10;
        var offh = h - baseOff;

        ctx.beginPath();
        ctx.moveTo(x + r, y);
        ctx.lineTo(x + w - r, y);
        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
        ctx.lineTo(x + w, y + offh - r);
        ctx.quadraticCurveTo(x + w, y + offh, x + w - r, y + offh);

        ctx.lineTo(x + mid + 10, y + offh);
        ctx.lineTo(x + mid, y + h);
        ctx.lineTo(x + mid - 10, y + offh);
        ctx.lineTo(x + r, y + offh);

        ctx.quadraticCurveTo(x, y + offh, x, y + offh - r);
        ctx.lineTo(x, y + r);
        ctx.quadraticCurveTo(x, y, x + r, y);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

    }
}

Answer 1

如果您将“onClick”功能设置为事件处理程序，则代码如下：

  someElement.onclick = thing.onClick;

那么问题是当实际调用函数时（发生事件时），浏览器将无法安排this成为正确的事情。因此，当您设置事件处理程序时，您必须确保绑定确实知道上下文的函数：

  someElement.onclick = function() { thing.onClick(); };

编辑 - 好的，现在我看到了绑定处理程序的代码。这应该是这样的：

        // attach events
        var e = document.getElementById(this.containerID);
        var thisObject = this;
        e.addEventListener("click", function() { thisObject.onClick(); }, false);

Javascript - 从对象内部调用方法（必须是简单的解决方案）

1 个答案: