title: JavaScript parameter value 'becomes' undefined when passed to constructor
body: <p>I am creating a JavaScript component which I am creating instances of based on jQuery results however, the DOM element which I pass into the constructor, although populated when I step through the loop in the calling code, is undefined when passed to the constructor.</p>
  
  <p>Here's my class and constructor...</p>
  
  <pre><code>export default class DeleteButton {
  
      /**
       * Creates an instance of DeleteButton.
       * 
       * @param {object} element The DOM element to make into a delete button.
       * 
       * @memberOf DeleteButton
       */
      constructor(element) {        
          this.id = element.getAttribute("data-id");
          if (!this.id) throw new Error("The 'data-id' attribute is required.");
  
          this.deleteUri = element.getAttribute("data-delete-uri");
          if (!this.deleteUri) throw new Error("The 'data-delete-uri' attribute is required.");
  
          $(element).click(this.confirmRemove);
      }
  
      confirmRemove() { // does something }
  }
  </code></pre>
  
  <p>and here's the calling code (This is a component manager that handles when to load components based on URLs / DOM state etc)...</p>
  
  <pre><code>export default class JsComponentManager {
  
      constructor(onLoader) {
          this._loader = onLoader;
          this.select = {
              deleteButtons: () =&gt; $(".js-delete-button")
          }
          this.result = 0;
      }
  
      bindComponents() {
          const paths = new PathManager();
          let $deleteButtons = this.select.deleteButtons()
          if ($deleteButtons.length &gt; 0) {
              this._loader.add(this.renderDeleteButtons, $deleteButtons);
          }
      }
  
      renderDeleteButtons($elements) {
          $elements.each(() =&gt; {
              document.DeleteButtons = document.DeleteButtons || [];
              document.DeleteButtons.push(new DeleteButton(this));
          });
      }
  }
  </code></pre>
  
  <p>This uses the following loader function to ensure that items are loaded...</p>
  
  <pre><code>/**
   * Adds an event to the onload queue.
   * 
   * @param {function} func The function to add to the queue.
   * @param {any} param1 The first (optional) parameter to the function.
   * @param {any} param2 The second (optional) parameter to the function.
   */
  var AddLoadEvent = function (func, param1, param2) {
      var oldonload = window.onload;
      if (typeof window.onload !== "function") {
          window.onload = () =&gt; { func(param1, param2); };
      } else {
          window.onload = () =&gt; {
              if (oldonload) { oldonload(); }
              func(param1, param2);
          };
      }
  };
  
  module.exports = {
      add: AddLoadEvent
  };
  </code></pre>
  
  <p>The onload management code seems to be running fine and, stepping through, code execustion is completely as expected until <code>document.DeleteButtons.push(new DeleteButton(this));</code> - 'this' here is the DOM element, as I would expect, but as soon as the debugger steps into the controller the value is undefined.</p>
  
  <p>Is this some odd scoping pain I've walked into?</p>