title: How to execute functions across objects identically to executing the function itself with a this reference
body: <p>I am working on a web app that is modular with its root component being the Editor Object. This Editor object handles the creation of multiple components. One of these component objects is the Filebar component which has the ability to reference the functions from the Editor object. Since there are a lot of buttons in the menu within the Filebar, I have created a table named "index" in my code that I use to reference functions within the Editor object. I am able to get the reference to the function itself, but I am having trouble executing the function as if it were being executed in the original object itself. So here are my questions:</p>
  
  <p>Question 1: How do I correctly reference the Editor object if I am calling the function from the Filebar object in order to pass the correct "this" into the new Inspector that I am creating? </p>
  
  <p>Question 2: (A hopefully small side question) Is this a good practice to be referencing functions for my event listener in a table like the one I show in my code below? </p>
  
  <pre><code>function Editor() {
  
      // Initializes the Object. Called at end.
      this.Initialize = function() {
          thisCreateFileBar();
      }
  
  
      this.createFilebar = function(){
          this.file = new Filebar(this);
      };
  
      // Creates a Scene Object. 
      this.createScene = function() {
          this.scene = new Scene(this);
      };
  
      // Create an Inspector.
      this.createInspector = function(){
          this.inspector = new Inspector(this);
      };
  
      // Create a Hierarchy.
      this.createHierarchy = function(){
          this.hierarchy = new Hierarchy(this);
      };
  
      let thisCreateFilebar = this.createFilebar.bind(this);
      let thisCreateInspector = this.createInspector.bind(this);
      let thisCreateHierarchy = this.createHierarchy.bind(this);
      let thisCreateScene = this.createScene.bind(this);
  
  </code></pre>
  
  <pre><code>function Filebar(editor){
  
      // Initializes the Object. Called at end.
      this.Initialize = function(){
          this.editor = editor;
          this.menu = document.getElementById("Engine_UI:Menu");
          this.menu.addEventListener("mouseup", thisChoice);
      }
  
      this.choice = function(event){
          // Question 2 Should I be referencing functions for my event listeners like this? 
          let index = {
              "Add Inspector": this.editor.createInspector,
              "Add Hierarchy": this.editor.createHierarchy,
              "Add Scene": this.editor.createScene
          };
  
          let element = event.target;
          if (element.innerHTML != null){
              let func = index[element.innerHTML];
              func(this.editor);
          } else return;
          event.stopPropagation();
      }
  
      let thisChoice = this.choice.bind(this);
      this.Initialize();
  }
  
  </code></pre>
  
  <pre><code>function Inspector(editor){
      console.log(editor) // Question 1 When passed directly from the editor object 
      // which passes in a reference to this, it passes itself
      // but when referenced from filebar it references the Window instead. 
  
      //other stuff happens here.
  }
  
  </code></pre>
  
  <p>The one thing that I have done to make this work is pass in an extra variable for the reference. This ends up working the way I would like it to, but in my mind this feels a bit hacky and I wanted to see if there was a way to correctly bind the objects to make this work. Or maybe passing in a variable instead would be better practice than using a this reference, I am not sure. Please let me know your thoughts!</p>