JavaScript 함수를 호출하는 데 문제가 있습니까?

Question

Raphael javascript 라이브러리를 테스트 중이므로 약간의 문제가 발생합니다. 저는 캔버스 위에 4 개의 도형을 그립니다. 그런 다음 개체를 클릭하여 현재 선택된 개체로 만들 수 있습니다. 그런 다음 삭제 키를 누르는 이벤트 처리기를 추가합니다. 이 잘 작동하지만 나는 함수를 호출 할 수있을 것 같습니다. 아래는 내 문제를 설명하는 코드입니다.

이

캔버스에 서클의 활용도 각각 나타내는 클래스입니다 :이 모양을 만들어

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. 모양이 선택한 객체 인 경우 다시 클릭하면 선택 해제됩니다.

나는 다음 캔버스에 네 개의 모양을 밀어 :

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 인 경우에 발생합니다. 이러한 혼란을 피하기 위해이 이름 중 하나 또는 둘 다를 변경하는 것이 좋습니다.

또한 자바 스크립트 콘솔과 함께 디버거를 사용해야합니다. 그렇다면 "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 
     } 
    } 
});