title: Accessing a method from a callback in OOP
body: <p>I'm new to OOP and this might be a simple question but I am having trouble accessing a method in this class:</p>
  <pre><code>class Lightbox {
    constructor() {
      this.images = document.querySelectorAll(&quot;figure &gt; a&quot;);
      this.lightbox = document.querySelector(&quot;#lightbox&quot;);
      this.lightBoxImage = this.lightbox.querySelector(&quot;img&quot;);
      this.events();
    }
  
    showLightbox() {
      this.lightbox.classList.remove(&quot;hide&quot;);
    }
  
    populateLink(source) {
      this.lightBoxImage.src = &quot;&quot;;
      this.lightBoxImage.src = source;
    }
  
    events() {
      this.images.forEach(function (image) {
        image.addEventListener(&quot;click&quot;, function (e) {
  
          console.log(this); // Returns the &quot;Image&quot;, which this refers to the &quot;image&quot;, can't access the prototype above
  
          e.preventDefault();
          this.showLightbox(); //Not a Function, can't access.
          this.populateLink(this.href);
        });
      });
    }
  }
  
  let lb = new Lightbox();
  </code></pre>
  <p>How can I access the <code>showLightbox()</code> method when <code>this</code> refers to the <code>image</code>? I've tried using <code>.bind(this)</code> on my callback but I still can't access <code>showLightbox()</code>.</p>