title: How do I bind the parameter 'this' to each element of an array when using forEach()?
body: <p><strong>Language</strong>: Javascript<br>
  <strong>Operating System</strong>: Ubuntu 14.04<br>
  <strong>Browser</strong>: Tested in Chromium, Chrome, Firefox.</p>
  
  <p><strong>Background</strong></p>
  
  <p>I'm making a HTML5 Canvas game that has various collectable items. The superclass for these items is <code>Collectable</code>, which has a <code>render()</code> function:</p>
  
  <pre><code>Collectable.prototype.render = function(){
      // renders the collectables
  }
  </code></pre>
  
  <p>There are different subclasses of <code>Collectable</code>, all of which delegate <code>render()</code> to the superclass. For example:</p>
  
  <pre><code>var Heart = function(x, y) {
      Collectable.call(this, x, y);
  }
  Heart.prototype = Object.create(Collectable.prototype);
  </code></pre>
  
  <p>I instantiate my collectables by first creating an array containing all of my collectables:</p>
  
  <pre><code>var collectables = [];
  var numOfEach = 5;
  // IIFE so as to not pollute global scope
  (function() {
      for (var i = 0; i &lt; numOfEach; i++) {
          // TODO: make this cleaner
          var heart = new Heart(100, 200);
          collectables.push(heart);
          var gemBlue = new GemBlue(100, 200);
          collectables.push(gemBlue);
          var gemOrange = new GemOrange(100, 200);
          collectables.push(gemOrange);
      }
  })();
  </code></pre>
  
  <p>Then in my game loop file, I have a <code>renderEntities()</code> function that repeatedly calls individual render methods on my objects:</p>
  
  <pre><code>function renderEntities() {
      // render my other objects
      ...
  
      // render collectables
      collectables.forEach(function() {
          // test what 'this' is bound to
          console.log(this);
  
          // call render method
          this.render();
      });
  }
  </code></pre>
  
  <p>...however in this case <code>this</code> is bound to <code>window</code> and therefore <code>this.render</code> is not a function.</p>
  
  <p><strong>Question</strong></p>
  
  <p>How do I bind <code>this</code> to each individual element of my <code>collectables</code> array?</p>
  
  <p><strong>My research</strong></p>
  
  <p>I've read the <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind" rel="nofollow noreferrer">documentation for the <code>bind</code> function</a>, but I'm afraid I can't work out how this would be applied with <code>forEach()</code> and my anonymous function.</p>
  
  <p>I then found <a href="https://stackoverflow.com/questions/19733758/passing-scope-to-foreach">this existing question</a> which explained how <code>forEach</code> takes an optional parameter to set <code>this</code>. After reading the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#Using_thisArg" rel="nofollow noreferrer">documentation on <code>forEach</code></a> I tried the following with unsuccessful results:</p>
  
  <pre><code> collectables.forEach(function() {
       // test what 'this' is bound to
       console.log(this);
  
       // call render method
       this.render();
   }, this);
  </code></pre>
  
  <p>...which obviously had the same effect of setting <code>this</code> to the global object.</p>
  
  <pre><code> collectables.forEach(function() {
       // test what 'this' is bound to
       console.log(this);
  
       // call render method
       this.render();
   }, collectables);
  </code></pre>
  
  <p>...this got me a little closer, as <code>this</code> is bound to the collectables array as a whole, but obviously <code>this.render</code> is still not a function. I can't see what argument I can use here in <code>forEach</code> to bind <code>this</code> to each element of the array.</p>
  
  <p>I have a feeling that after typing all this out the answer will be very simple. I'm relatively new to the concept of <code>this</code> so go easy on me!</p>
  
  <p>I haven't found another question that answers this for me, or at least one that I'm able to understand given my level of knowledge. For example, I have considered the following questions:  </p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/28079213/calling-a-class-function-in-foreach-how-javascript-handles-this-keyword/28079250#28079250">Calling a class function in forEach: how Javascript handles “this” keyword.</a></li>
  <li><a href="https://stackoverflow.com/questions/19707969/the-invocation-context-this-of-the-foreach-function-call">The invocation context (this) of the forEach function call</a></li>
  <li><a href="https://stackoverflow.com/questions/19733758/passing-scope-to-foreach">Passing scope to forEach</a></li>
  </ul>