title: Undefined error thrown at runtime
body: <p><em>I see the link about the use of <code>this</code> is jQuery. Yes, the problem was exactly this, but this situation is a completely different one, so please remove useless links to other questions and mark as duplicated because this can lead to confusion to a poor SO user looking for a more simple situation.</em></p>
  
  <p><em>Also: my code is fully pasted here, not just a snippet, and my code is not using some complicated binding at all, is more basilar. So it's a complete new question for me</em></p>
  
  <p>This is my <strong>full working</strong> code</p>
  
  <pre><code>var game = {
      status : {
          NOT_INITIALIZED : "gamepad:not_initialized",
          INITIALIZED     : "gamepad:initialized",
      },
      _selector : null,
      _status   : null,
      init : function( gamepad_selector ) {
          this._selector = gamepad_selector;
          $(this._selector).on(this.status.NOT_INITIALIZED, this.onNotInitialized);
          this.setState(this.status.NOT_INITIALIZED); // just to force the first console log
          $(this._selector).on(this.status.INITIALIZED, this.onInitialized);
          this.setState(this.status.INITIALIZED);
      },
      setState : function ( new_status ) {
          this._status = new_status;
          $(this._selector).trigger(new_status);
      },
      onNotInitialized: function () {
          console.log("onNotInitialized()");
      },
      onInitialized: function () {
          console.log("onInitialized()");
      },
  }
  </code></pre>
  
  <p>The entry point is a call to <code>game.init()</code>.</p>
  
  <p>Note that on the <code>init</code> function, I can call <code>setState</code> using one of the predefined status. This works.</p>
  
  <pre><code>this.setState(this.status.NOT_INITIALIZED);
  </code></pre>
  
  <p>I tried to avoid using of <code>this.setState</code>, so I deleted this function and tried to set <code>this._state</code> directly into the event listeners. </p>
  
  <p>This the significative parts of <strong>not working</strong> code:</p>
  
  <pre><code>init : function( gamepad_selector ) {
      ....
      console.log ("a");
      $(this._selector).on(this.status.NOT_INITIALIZED, this.onNotInitialized);
      console.log ("b");
      $(this._selector).trigger(this.status.NOT_INITIALIZED)
      console.log ("c");
      ....
  },
  
  onNotInitialized: function () {
      // I can't do this: throws an error
      this._status = this.status.NOT_INITIALIZED;
      console.log("onNotInitialized()");
  },    
  </code></pre>
  
  <p><strong>The problem:</strong> at runtime I got this error:</p>
  
  <pre><code>Cannot read property 'NOT_INITIALIZED' of undefined
  </code></pre>
  
  <p>related to </p>
  
  <pre><code>this._status = this.status.NOT_INITIALIZED;
  </code></pre>
  
  <p>The error is at runtime, not at 'compile' time (please forgive me the term), because I can see on the console log both <code>a</code> and <code>b</code>. But not <code>c</code>.</p>
  
  <p>Why can I explicitly use <code>this.status.NOT_INITIALIZED</code> in <code>init</code> but not in <code>onNotInitialized</code> ?</p>