Почему этот JavaScript OO не так?

Question

Я изложу свой код простым способом, но если какая-то добрая душа захочет помочь, код будет | на Github | /lib/inmotion/editor.js(line 99)

editor.js

function Editor(){
  var instance = this;
  this.key_frames = [] // a list of key frames
  this.kf = null   // the current KeyFrame

  function notice_click( click ){
    instance.kf.add_bone( 1 ) // <-- error here
    // instance.kf.list.push( 1 ) // <-- this works, but is incomplete
  }
}

key_frame.js

function KeyFrame(){
  instance = this
  instance.changed = false // for the redraw :)
  instance.list = []

  function add_bone( bone ){
    instance.list.push( bone )
    instance.changed = true
    return true
  }
}

В моей программе есть уникальный экземпляр Editor, в котором имеется множество экземпляров KeyFrames.
Каждый ключевой кадр содержит много костей.
Таким образом, всегда есть один активный ключевой кадр, определенный экземпляром Editor.kf
Поскольку у меня есть только один kf, я могу добавить к нему кости без проблем, но, добавив больше ключевых кадров, я могу добавить add_bone только к последнему kf, который я создал! Зачем?

Если я не был достаточно ясен, прошу прощения, задаю вопрос

Answer 1

Насколько я понимаю, проблема в том, что «экземпляр» перезаписывается при каждом вызове KeyFrame.Вы должны использовать «это» напрямую.

Answer 2

В вашем KeyFrame объекте отсутствует var, он должен выглядеть следующим образом:

function KeyFrame(){
  var instance = this;
  instance.changed = false;
  instance.list = [];

  function add_bone( bone ){
    instance.list.push( bone );
    instance.changed = true;
    return true;
  }
}

Без ключевого слова var вы определяете или перезаписываете window.instance, переменную global , а не локальную для объекта, как вы хотите:)