Javascript - オブジェクトの中からメソッドを呼び出す（単純な解決策でなければならない）

Question

これは非常に単純な解決策だと確信していますが、検索は何も起きていないと思います。

私がしたいのは、初期化の最後にinitialize（）やzoom（）などの2つのメソッドを含むオブジェクトを作成することです。ズームメソッドを呼び出すには、

function zoom() {...}; 

私はそれを呼び出すことができます.width = 100' 、問題は、私は私がそう

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

のようにズームを宣言した場合、私はこのようにそれを宣言した場合）（intialiseからズーム（）を呼び出すカントであります私はインスタンス変数を使用しようとすると、定義されていない状態に戻ります。最初のメソッドと同じ問題を抱えていますが、オブジェクトの外側から呼び出すときは、期待どおりに動作しますが、別のメソッドからメソッドを呼び出そうとすると、メソッドが存在しないことがわかります。

私が言ったように、簡単な説明がありますので、詳しくは下記のソースコードをご覧ください。

私は、このコードで問題の完全なホストを見ることができると確信しています、それは非常に多くの学習練習しようとすると、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(); }; 

編集 — OKああ、今私はハンドラをバインドするコードを参照してください：あなたは、イベントハンドラを設定するときにこのように、あなたはは、コンテキストを知らないという機能をバインドすることを確認する必要があります。すなわち、このようになります。

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