Модуль/прототип и несколько экземпляров

Question

Я пытаюсь понять методы JavaScript «ООП», и сегодня я начал писать небольшое тестовое приложение. В принципе, это игровой цикл, и каждый координат обновления должен быть увеличен, чтобы перемещаться элемент HTML.

Проблема заключается в том, что я хочу иметь возможность запускать более одного экземпляра приложения, и поэтому я пытаюсь сохранить данные экземпляра в this, но то, что сохраняется в моем конструкторе, и метод exec() недоступен в частный метод update(). Что, кажется, офицер, проблема?

var Jsloth = (function() { 
    var Jsloth = function() { 
     var sloth = document.createElement('div'); 
     var attr = document.createAttribute('class'); 
     attr.value = 'sloth'; 
     sloth.setAttributeNode(attr); 
     this.sloth = document.getElementsByTagName('body')[0].appendChild(sloth); 
    }; 

    var exec = function() { 
     this.x = 0; 
     this.y = 0; 
     var that = this; 
     setInterval(function() { 
      that.update(); 
     }, 1000/10); 
    }; 

    var update = function() { 
     this.x++; 
     this.y++; 
     this.sloth.style.left = this.x + 'px'; 
     this.sloth.style.bottom = this.y + 'px'; 
    }; 

    Jsloth.prototype.constructor = Jsloth; 
    Jsloth.prototype.exec = exec; 
    Jsloth.prototype.update = update; 

    return Jsloth; 
})(); 

var sloth1 = new Jsloth(); 
sloth1.exec(); 

Edit: Обновленный код с рабочим решением!

Answer 1

Вы не добавили update к прототипу. Значение this в этом методе, скорее всего, будет window.

Изменить вызов от этого:

update(); 

Для этого:

update.call(this); 

---

Или добавьте update к .prototype:

Jsloth.prototype.update = update; 

и использования:

this.update(); 

---

Но если вы собираетесь позвонить update() из setInterval(), вам необходимо обеспечить надлежащее this значение.

Для этого вы можете передать анонимную функцию и сохранить ссылку на внешнее значение this в переменной.

var exec = function() { 
    this.x = 0; 
    this.y = 0; 
    var that = this; 
    setInterval(function() { 
     that.update(); 
     //update.call(that); // if you didn't add update() to the .prototype 
    }, 1000/10); 
}; 

Answer 2

В JavaScript this есть (почти) полностью решает как вы вызываете функцию, а не где/как это определено.

Путь вы звоните update:

update(); 

... this будет глобальный объект (window в браузерах), или undefined, если вы используете "use strict".

Чтобы установить this в update используйте call или apply:

update.call(this); 
// or 
update.apply(this); 

Больше (в моем блоге):

• Mythical methods
• You must remember this