Проблема с вызовом функции JavaScript?

Question

Я тестирую библиотеку JavaScript Raphael и буду испытывать небольшую проблему. Я рисую четыре фигуры на холсте. Затем я разрешаю объекту быть выбранным в данный момент объектом, щелкнув. Затем я добавляю обработчик событий, который прослушивает нажатие клавиши удаления. Это прекрасно работает, но я, похоже, не могу назвать функцию. Ниже приведен код, иллюстрирующий мою проблему.

Это класс, который представляет каждый из кругов, на холсте:

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 имеет нулевое значение, кликнутая фигура установлена ​​на 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.shape вместо selectedObj. Путаница вызвана тем, что ваш класс называется 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 
     } 
    } 
});