Question

我想访问一个对象，但我不知道如何。我想访问'ctx'，但是使用base.ctx总是返回null（这是一个闭包吗？）。

window.base = function () {

    var c = null,
        ctx = null;

    window.addEventListener("load", function(){
        c = document.getElementById("canvas");
        ctx = c.getContext("2d");
    }

}

我发现解决方案是调用返回ctx的基函数。

window.base = function () {

    var c = null,
        ctx = null;

    window.addEventListener("load", function(){
        c = document.getElementById("canvas");
        ctx = c.getContext("2d");
    }

    return {
        ctx: function(){return ctx;}
    };

}

然后我可以访问ctx，但现在我所有的访问都需要：

base.ctx().setStyle = "white";

而不是我喜欢的是：

base.ctx.setStyle = "white";

有可能吗？我认为有一个可能的解决方案有'this'/ scope或者什么，但我还不知道JavaScript。

Answer 1

base是一个函数。

像这样使用它：

base().ctx()

我会用这种方式编写你的代码：

window.addEventListener('load', function () {
    var base = function () {
        return document.getElementById("canvas").getContext("2d");
    }

    // Do something with base()
});

您也可以删除该功能，只使用上下文：

window.addEventListener('load', function () {
    var base = document.getElementById("canvas").getContext("2d");
    // Do something
});

Answer 2

我的答案是将值存储在一个名为＆＃34; inter＆＃34;的对象中，然后更新该对象的内容 - 然后其他代码可以看到这些更改。

那么我可以使用： base.ctx.fillStyle =＆＃34; white＆＃34 ;;

我不知道为什么其他方式不起作用！

var base = function () {

var fps = 60,
    canvasWidth = 300,
    canvasHeight = 200,
    scaling = 1;

function updateCanvas(){
  ctx.putImageData(imageData, 0, 0);
}

var c = null,
    cStyle = null,
    updateGraphicsCallBack = null;

function initialiseCanvas(canvasName, theCallBack){
    updateGraphicsCallBack = theCallBack;
    c = document.getElementById(canvasName);
    cStyle = c.style;
    inter.ctx = c.getContext("2d");
    inter.imageData = inter.ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    inter.imageArray = inter.imageData.data;
    inter.buff8 = new Uint8ClampedArray(inter.imageArray.buffer);
    inter.buff32 = new Uint32Array(inter.imageArray.buffer);

    cStyle.width = canvasWidth * scaling + "px";
    cStyle.height = canvasHeight * scaling + "px";
    c.width = canvasWidth;
    c.height = canvasHeight;
    inter.ctx.imageSmoothingEnabled = true;
    inter.ctx.fillStyle="#909090";

    //mouse = (typeof window.mouseInit !== "undefined") ? window.mouseInit(c) : null;
    //if(typeof window.db !== "undefined") window.db.setOutput("debugOutput");

    requestAnimationFrame(drawLoop);
}

var oldTimeStamp = 0, timeTweak = 0;
function drawLoop(currentTimeStamp) {
    currentTime = currentTimeStamp;

    if(typeof timeChart !== "undefined") timeChart.start();  

    setTimeout(
        function() {
            requestAnimationFrame(drawLoop);
        }, (1000 - ((currentTimeStamp - oldTimeStamp) - timeTweak)) / fps);

    updateGraphicsCallBack(currentTimeStamp);

    if(typeof timeChart !== "undefined") {
        timeChart.end();
        if(timeChart.currentFrameCount() > -1){
            var difference = timeChart.currentFrameCount() - fps;
            timeTweak += difference;
            if(timeTweak<-10000) timeTweak = -10000;
            if(timeTweak>10000) timeTweak = 10000;
        }
        inter.timeTweak = timeTweak;
    }

    oldTimeStamp = currentTimeStamp;
}

var inter = {
    updateCanvas: updateCanvas,
    ctx: null,//function(){return ctx;},
    canvasWidth: canvasWidth,
    canvasHeight: canvasHeight,
    fps: fps,
    scaling: scaling,
    imageData: null,
    imageArray: null,
    buff8: null,
    buff32: null,
    timeTweak: timeTweak,
    initialiseCanvas: initialiseCanvas
};

return inter;

}();

在没有使用函数的情况下访问对象内部的对象？

2 个答案: