関数を使用せずにオブジェクト内のオブジェクトにアクセスしますか？

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

ベースは関数です。あなたはまた、機能を削除し、ちょうどコンテキストを使用することができます

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

    // Do something with base() 
}); 

：

base().ctx() 

私はこの方法でコードを記述します。

はこのようにそれを使用

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

Answer 2

私の答えは、 "inter"というオブジェクトに値を格納してから、そのオブジェクトの内容を更新することですesは他のコードから見えました。

だから私は使用することができます： base.ctx.fillStyle = "white";

他の方法がうまくいかなかった理由はわかりません。

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; 

}();