Why this JavaScript OO is wrong?

Question

I will put my code in a simple way, but if any good soul wants to help the code is |on 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
  }
}

My program has an unique Editor instance that has lots of instances of KeyFrames.
Each KeyFrame holds lots of bones.
So there is always one active KeyFrame, defined by instance of Editor.kf
As I only have one kf, I can add bones to that one with no problem, but as I add more KeyFrames I can only add_bone to the last kf I created! Why?

If I was not clear enough, I apologize, ask on doubt

Answer 1

The problem, as far as I understand it, is that 'instance' gets overwritten each time you call KeyFrame. You should use 'this' directly.

Answer 2

Your KeyFrame object is missing a var, it should look like this:

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

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

Without the var keyword you're defining or overwriting window.instance, a global variable, not a local one to the object like you want :)