title: Is it possible to protect the 'this' reference binding a function within an object?
body: <p>Given the following JavaScript (the relevant HTML will be posted at the bottom of the question):</p>
  
  <pre><code>var app = {
      // other objects from 'messages' array removed for brevity
      'messages': [{
          'author': 'Maya Angelou',
          'quote': "If you don't like something, change it. If you can't change it, change your attitude."
      }],
      'textProp': 'textContent' in document.body ? 'textContent' : 'innerText',
      'outputTo': document.querySelector('#output'),
      'trigger': document.querySelector('#load'),
      'quote': function () {
          var n = Math.floor(Math.random() * this.messages.length),
              f = document.createElement('figure'),
              c = document.createElement('figcaption'),
              frag = document.createDocumentFragment();
          f[this.textProp] = this.messages[n].quote;
          c[this.textProp] = this.messages[n].author;
          frag.appendChild(f);
          frag.appendChild(c);
          this.outputTo.innerHTML = '';
          this.outputTo.appendChild(frag);
      }
  };
  </code></pre>
  
  <p>We can call the <code>quote()</code> function from outside of the object using the following:</p>
  
  <pre><code>document.getElementById('load').addEventListener('click', app.quote.bind(app));
  </code></pre>
  
  <p><a href="http://jsfiddle.net/davidThomas/3yj7v/1/" rel="nofollow noreferrer">JS Fiddle demo</a>.</p>
  
  <p>Or by simply calling the function directly (not bound as a callback to an event-handler):</p>
  
  <pre><code>app.quote();
  </code></pre>
  
  <p><a href="http://jsfiddle.net/davidThomas/3yj7v/2/" rel="nofollow noreferrer">JS Fiddle demo</a>.</p>
  
  <p>However, I <em>tried</em> to create an event-handler within the object itself, using:</p>
  
  <pre><code>'clickhandler': function(){
      this.trigger.addEventListener('click', this.quote);
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/davidThomas/3yj7v/3/" rel="nofollow noreferrer">JS Fiddle demo</a>.</p>
  
  <p>This, of course, failed (as expected, since <code>this</code> here is (using an IIFE) <a href="http://jsfiddle.net/davidThomas/3yj7v/4/" rel="nofollow noreferrer">this <code>Window</code> object</a>).</p>
  
  <p>I realise that <code>this</code> will, while the object is being created/prior to its initialisation, refer to the <code>Window</code> object, but is there a way I'm not seeing to create, and trigger, the event-handling within the object itself?</p>
  
  <p>I realise that a large portion of my imaginary internet points comes specifically from JavaScript, but learning it accidentally leads to moments of utter confusion and inadequacy; this is not to excuse my ignorance but to explain it.</p>
  
  <p>Finally, the HTML (such as it is):</p>
  
  <pre><code>&lt;button id="load"&gt;Switch message&lt;/button&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Incidentally, I've looked at the following linked/suggested questions:</p>
  
  <p>For clarity, I'm trying to create the object itself and have the event-handling created and assigned entirely within/'by' the object, without having to call its methods afterwards. That's the part where I'm stuck (and which I suspect may be impossible).</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/2829021/is-it-possible-to-reference-object-within-the-same-object">Is it possible to reference object within the same object?</a> - and I'm not seeing the relevance (though perhaps I'm simply tired at this point).</li>
  <li><a href="https://stackoverflow.com/questions/12114756/is-it-possible-to-implicitly-reference-a-member-of-the-parent-object-from-within">Is it possible to implicitly reference a member of the parent object from within a function of a child object?</a> - this suggests that the only possible way would be to extend the <code>app</code> object following its initialisation by adding a new method, which is do-able, but does rather go against what I <em>want</em> to do (and I realise that life is not fair, but even so...).</li>
  <li><a href="https://stackoverflow.com/questions/16309184/javascript-using-bind-within-an-object-how-can-i-access-object-this">Javascript using bind within an object, how can I access object this?</a> - deals with an event-handler, but doesn't seem directly applicable. I may be misunderstanding though.</li>
  </ul>