Как к созданному обьекту задать функцию и иметь возможность её отменить?

Question

[Ingernirated]

Подскажите, как к созданному обьекту через new задать выполнение функции с помощью setInterval при создании?
А точнее, как её задать каждому созданному экземпляру, чтобы у каждого элемента были свои данные, а так же имели возможность их останавливать по отдельности?
И можно ли при создании запихнуть новый обьект в массив?
функция move()
массив arr
https://jsfiddle.net/uzuarvm4/4/

Answer 1

[kwolfy]

При передаче функции в setInterval она вызывается в контексте window(т.е. this у этой функции будет ссылаться на window). Для того, чтобы функция вызывалась в своем контексте, нужно переделать
setInterval(one.move, 100)

На
setInterval(function(){ one.move(); }, 100)

Вот вам исправленный вариант с запуском и остановкой движения
https://jsfiddle.net/uzuarvm4/6/

Comments

[Ingernirated]

спасибо, это превосходно, только немножко непонятно
обьясните, пожалуйста, пару моментов.
1)как здесь работает событие updateDOM?

enemy.prototype.move = function(updateDOM) {
  this.x++;
  var chance = Math.random();
  
  if(chance > 0.5) {
  	this.y++;
  }
  
  if(updateDOM)
  	this.updateDOM();
}

2)Зачем тут this переводить в переменную и как тут работает this._interval?
а точнее, что значит пробел с интревалом?

enemy.prototype.runMoving = function(){
  var self = this;
	this._interval = setInterval(function() {
  	self.move(true);
  }, 100);
}

enemy.prototype.stopMoving = function(){
	if(this._interval){
  	clearInterval(this._interval);
    this._interval = undefined;
  }
}

3)Почему one.el?
И можно как-то контролировать setInterval?
Допустим, если будут создаваться такие элементы по 3-5шт каждые 5 секунд и после определенного события, убивать их интервал?

function create() {
	var one = new enemy();
	document.querySelector(".boris").appendChild(one.el);
  
  return one;	
}

var alice = create();
var bob = create();

[kwolfy]

1. Реализацию updateDOM можете посмотреть ниже, параметры переводятся в свойства элемента, здесь нет никакой магии)

2. в js контекст функции зависит от места его вызова, в данном случае как я писал выше, если передать в setInterval функцию, то она вызовется в контексте window, для того чтобы иметь доступ к оригинальному this как раз и есть это присваивание self = this. Нижнее подчеркивание в this._interval ничего не означает, это просто распространенный способ именования свойств объекта, когда приватные свойства начинаются с нижнего подчеркивания.

3. В констукторе enemy мы создаем элемент для объекта и записываем его в this.el, а после создания, добавляем этот элемент к DOM, чтобы он отображался. Убивание их интервала я тоже реализовал в методе stopMoving