title: Variables "this" context not updating after re-assigning variable
body: <p>I am having trouble defining the proper terminology and if my understanding of the following code is correct.</p>
  
  <p>I create a constructor function</p>
  
  <pre><code>function BoardGame () {
      this.count = 10;
      this.random = Math.floor((Math.random() * 100) + 1);
  }
  
  BoardGame.prototype.getNumber = function(){
      // this is a button that is clicked
      $('.inputField').on('click', function (event) {
          this.guess= parseInt($('#inputField').val(), 10);
          $("'#inputField'").val("");
            this.validChecker();
        }.bind(this));
  }
  
  BoardGame.prototype.validChecker = function() {
      if (this.guess &lt; 1 || this.guess &gt; 100) {
      $('#warning').append($('&lt;p&gt;&lt;/p&gt;'));
    }
  };
  
  BoardGame.prototype.newGame = function () {
      game = new BoardGame();
  }
  
  $(document).ready(function(){
      game = new BoardGame();
      game.getNumber();
  });
  </code></pre>
  
  <p>In the document.ready function a new instance of a BoardGame is created and the reference is set to the <code>game</code> variable in the global scope.</p>
  
  <p>Then, the event listener is created.</p>
  
  <p>When the event listener inside of getNumber is clicked, it passes the "this" context (game) and it uses that as the this reference.  It calls <code>this.validChecker()</code>.</p>
  
  <p>At some point, the <code>game.newGame()</code> is invoked. Now, a new instance of boardGame is re-assigned to the game variable.  If I look into my "this" references, it references the old BoardGame object (before the re-assignment) not the new BoardGame instance recently created.</p>
  
  <p>If I change my newGame code to this:</p>
  
  <pre><code>BoardGame.prototype.newGame = function () {
      BoardGame.call(this);
  }
  </code></pre>
  
  <p>And run the newGame function, the "this" references, updates and changes the current object properties to the properties in the BoardGame constructor.  It goes to the actual object instead of re-assigning.  I'm not sure why this makes such a big difference, shouldn't the context of this change to the new assigned object?</p>
  
  <p>When I call new BoardGame() in the newGame function, why doesn't the "this" references change to the new object?</p>
  
  <p>It seems like there is a difference between changing the current object vs re-assigning a new Object, even though I can change properties on the object. What is going on here?</p>
  
  <p>When I call new BoardGame in newGame() and the "this" references the old object after the reassignmnt, what is keeping the reference to the old object, is this a closure? scope? Object by reference vs value concept?</p>
  
  <p>EDIT:  I would like to add that when I "reset" the game var with "new BoardGame()" and then click the button, "this" references the old object. But if I were to call <code>game.getNumber();</code> on it's own line, the "this" references the new game object, which is what I expect.</p>
  
  <p>I believe the base of what is happening is related to this example even though I don't have a 100% clear grasp of the concept.</p>
  
  <pre><code>var a = {a: "A"};
  var b = a;
  
  a = "hello"
  b; // still references {a: "A"}
  </code></pre>
  
  <p>So in my scenario, the context of this when the event listener is created is the original object.  Then when <code>new BoardGame</code> is called in the newGame function the game references changes but the "this" reference is still referencing the original object (not sure why that doesn't change with it).</p>
  
  <p>When we use the BoardGame.call(this), this refers to only one object in all of the code, no matter where we look.  We aren't ever creating a second object.</p>