JavaScript関数を呼び出す際の問題？

Question

私はRaphaelのjavascriptライブラリをテストしていますが、小さな問題が発生します。キャンバスに4つの図形を描いています。私は、オブジェクトをクリックして現在選択されているオブジェクトにすることを許可しています。次に、削除キーを押すイベントハンドラを追加します。これはうまく動作しますが、私は関数を呼び出すことができないようです。以下は私の問題を説明するコードです。

これは、キャンバス上cirlcesのそれぞれを表すクラスです。

var Shape = new Class({ 
    initialize: function(x, y, color) 
    { 
     this.shape = paper.circle(x, y, 25); 
     this.shape.attr("fill", color); 

     this.shape.click(function() 
     { 
      if(selectedObj == null) 
      { 
       selectedObj = this; 
       selectedObj.attr({'stroke':'orange', 'stroke-width':'5'}); 
      } 
      else if(selectedObj != this) 
      { 
       selectedObj.attr({'stroke':'orange', 'stroke-width':'0'}); 
       selectedObj = this; 
       selectedObj.attr({'stroke':'orange', 'stroke-width':'5'}); 
      } 
      else if(selectedObj == this) 
      { 
       selectedObj.attr({'stroke':'orange', 'stroke-width':'0'}); 
       selectedObj = null; 
      } 
     }); 
    }, 
    deleteThis: function() 
    { 
     alert("Inside The deleteThis() Function."); 
    } 
}); 

これは、形状を作成し、クリックされたとき、それは次のようん、

1. selectedObjがnullの場合クリックされた図形はselectedObjに設定され、図形の周りに小さな色付きのリムが描画されます。
2. selectedObjがクリックされた図形でない場合は、以前選択したオブジェクトの小さな境界線を取得し、新しくクリックされた図形を現在選択されている項目として設定します。
3. シェイプが選択されたオブジェクトの場合、再度クリックするとシェイプの選択が解除されます。

私は、キャンバスに4つの形状をプッシュ：

objShapes.push(new Shape(50, 50, "red")); 
objShapes.push(new Shape(250, 50, "blue")); 
objShapes.push(new Shape(50, 250, "yellow")); 
objShapes.push(new Shape(250, 250, "green")); 

は、今私は、キャンバス上のオブジェクトを選択し、選択解除できることに成功し、私は、選択したオブジェクトの関数を呼び出すことができるようにする必要があります。機能を起動するには、キーボードを使用しています。次のコードは私が使用しているものです：

$(document).keydown(function(event) 
{ 
    if(event.keyCode == 46) 
    { 
     if(selectedObj == null) 
     { 
      alert("nothing to delete"); 
     } 
     else 
     { 
      alert("Deleting " + selectedObj.attr('fill') + " Circle."); 
      selectedObj.deleteThis(); 
     } 
    } 
}); 

イベントハンドラの一部だけが動作します。私が削除キーを押しても何も選択されていない場合、警告ウィンドウには何も選択されていないと表示されますが、オブジェクトを選択して削除キーを押すと警告が表示され、その後、deleteThis()関数の呼び出しに失敗します。私はそれが.attr()機能を呼び出すが、deleteThis()機能を呼び出さない理由を理解していない。

この関数を呼び出せない理由は何ですか？

Answer 1

問題はselectedObjが内部のshape変数を参照していて、クラスのオブジェクトではありません。オブジェクト自体を参照させることができます（以下のコードを参照してください;基本的にオブジェクトをselfまたはthatと呼ばれる変数にキャッシュして、格納しているオブジェクトとしてクロージャー内で使用します）。次に形状を参照するにはselectedObjの代わりにselectedObj.shapeを実行します。この混乱は、クラス名がShapeとで、メンバー変数がshapeであることが原因です。おそらく、混乱を避けるためにこれらの名前のどちらかを変更することを検討してください。

また、javascriptコンソールでデバッガを使用する必要があります。もしあなたがそうだったら、 "deleteThisがオブジェクトに定義されていません"というエラーメッセージが表示されます。これは、これを追跡するのに役立ちます。

とにかく、ここで上記の変更を伴うコードです：その後、

var Shape = new Class({ 
    initialize: function(x, y, color) 
    { 
     // To keep track of the object itself 
     var self = this; 

     this.shape = paper.circle(x, y, 25); 
     this.shape.attr("fill", color); 

     this.shape.click(function() 
     { 
      if(selectedObj == null) 
      { 
       selectedObj = self; // Assign the object, not the shape 
       selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'5'}); 
      } 
      else if(selectedObj != self) // Compare the object, not the shape 
      { 
       selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'0'}); 
       selectedObj = this; // Assign the object, not the shape 
       selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'5'}); 
      } 
      else if(selectedObj == self) // Compare the object, not the shape 
      { 
       selectedObj.shape.attr({'stroke':'orange', 'stroke-width':'0'}); 
       selectedObj = null; 
      } 
     }); 
    }, 
    deleteThis: function() 
    { 
     alert("Inside The deleteThis() Function."); 
    } 
}); 

そして、他の部分で同様の調整を行います。

$(document).keydown(function(event) 
{ 
    if(event.keyCode == 46) 
    { 
     if(selectedObj == null) 
     { 
      alert("nothing to delete"); 
     } 
     else 
     { 
      alert("Deleting " + selectedObj.shape.attr('fill') + " Circle."); // Reference the shape here 
      selectedObj.deleteThis(); // This is the object now 
     } 
    } 
});