Как добавить функцию обработчика событий в прототип в JavaScript?

Question

Спасибо всем, кто помог мне сегодня вечером с моим маленьким проектом.

Я пытаюсь переписать простую процедурную программу, которую я написал несколько недель назад с использованием ООП javascript.Программа представляет собой тестер реакции, который представляет пользователю произвольную форму и измеряет, насколько быстро пользователь щелкает форму и отображает скорость.Ранее мне наконец-то удалось получить на странице прямоугольник произвольного размера и цветной.Теперь я пытаюсь написать функцию обработчика событий, которая установит для свойства css display значение none при щелчке по фигуре, чтобы она исчезла.Тем не менее, функция обработчика событий не работает, и я пробовал несколько разных способов.Смотрите весь мой код ниже:

function Shape () {
  this.x = Math.floor(Math.random()*1200);
  this.y = Math.floor(Math.random()*500);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div id="shape-div"></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    'width': widthAndHeight,
    'height': widthAndHeight,
    position: "relative",
    left: this.x,
    top: this.y
  });
  this.shapeElement.css({
    display: "block"
  });

//Just below is where I am trying to create a function to make the shape disappear when clicked

  this.shapeElement.click(function() {
    this.shapeElement.css("display", "none");
  });

  $("body").append(this.shapeElement);
}



"use strict";
Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: randomColour});
}


$(document).ready(function() {
  var square = new Shape();
  square.draw();
  square.colour();

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Это просто не сработает.Я делаю переход к ООП и нахожу действительно трудным делать вещи, которые были просты, используя процедурное программирование.Это типично?Еще раз спасибо за помощь.

Answer 1

Всякий раз, когда вы используете function(){, внутренняя часть этой функции получает новый контекст вызова (новый this) в зависимости от того, как она была вызвана.Но в вашем обработчике вам не нужно новое значение this - вы хотите наследовать this экземпляра Shape.Вместо этого вы можете использовать функцию стрелки или помнить, что this в обработчике ссылается на элемент, по которому щелкнули:

function Shape () {
  this.x = Math.floor(Math.random()*1200);
  this.y = Math.floor(Math.random()*500);
  this.draw();
}

Shape.prototype.draw = function() {
  var shapeHtml = '<div id="shape-div"></div>';
  var widthAndHeight = Math.floor(Math.random()*400);
  this.shapeElement = $(shapeHtml);
  this.shapeElement.css({
    'width': widthAndHeight,
    'height': widthAndHeight,
    position: "relative",
    left: this.x,
    top: this.y
  });
  this.shapeElement.css({
    display: "block"
  });

//Just below is where I am trying to create a function to make the shape disappear when clicked

  this.shapeElement.click(function() {
    $(this).css("display", "none");
  });

  $("body").append(this.shapeElement);
}



"use strict";
Shape.prototype.colour = function() {
  var colours = '0123456789ABCDEF'.split('');
  var randomColour = "#";
  for (i = 0; i < 6; i++) {
    randomColour+=colours[Math.floor(Math.random()*16)];
  };
  this.shapeElement.css({backgroundColor: randomColour});
}


$(document).ready(function() {
  var square = new Shape();
  square.draw();
  square.colour();

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Вы можете попробовать заменить:

this.shapeElement.click(function() {...

для

this.shapeElement.on("click",function() {...

Вы добавляете этот элемент в DOM после его загрузки.Кроме того, проверьте вашу консоль, потому что внутри прослушивателя событий this.shapeElement.css("display", "none");, вероятно, выдает ошибку, this в этом контексте является элементом, вызывающим событие ... Я думаю, вы могли бы использовать:

$(this).css({"display": "none"});