title: When you pass 'this' as an argument?
body: <p>I'm trying to learn about <code>this</code>, and it's confusing me a bit here:</p>
  <pre><code>var randomFunction = function(callback) {
      var data = 10;
      callback(data);
  };
  
  var obj = {
      initialData:  20,
      sumData: function(data) {
          var sum = this.initialData + data;
          console.log(sum);
      },
      prepareRandomFunction: function() {
          randomFunction(this.sumData.bind(this));
      }
  };
  
  obj.prepareRandomFunction();
  </code></pre>
  <p>Is <code>this</code> designed to set itself where it is first rendered in code?</p>
  <p>For instance, in my example I'm successfully using it to refer to <code>obj</code> and also binding the function to <code>obj</code>, but since <code>this</code> is being passed as a callback function, what is stopping it from being set as <code>randomFunction</code> (i.e. what's stopping it from literally passing &quot;this.sumData.bind(this)&quot; so that <code>this</code> is set to <code>randomFunction</code> when it gets called from there)?</p>
  <h3>Updated</h3>
  <p>I'm not exactly asking how this works generally (I don't think). I'm mainly curious to know why <code>this</code> gets set where I define it as the argument of my <code>randomFunction</code> call, and not where <code>callback</code> gets called within <code>randomFunction</code>.</p>
  <p>I could be wrong, but if I were to swap <code>this.sumData.bind(this)</code> with the <code>callback(data)</code> that I currently have I think I would get a different result. Is that because <code>callback</code> is a reference to <code>this.sumData.bind(this)</code> when it was first defined (and where <code>this</code> is <code>obj</code>)?</p>
  <hr />
  <p>I think I've learned through this scenario that <code>this</code> is set when it's executed. It's not passed as a argument to be set later when the argument is called down the line.</p>