0

I was just trying something for fun and came across this issue. I'm pretty experienced with JavaScript and am totally stumped as to what I am missing that is so obvious. Whenever I run this code, I get an error saying this.Trigger is not a function. I am using Chrome.

class AutomatedProcess {
    constructor(trigger, callback) {
        this.Trigger = trigger;
        this.Callback = callback;
    }
    release(event) {
        if (this.Trigger()) {
            this.Callback(event);
        }
    }
}

let proc = new AutomatedProcess(function() { return true; }, function() { console.log('hi');});

window.addEventListener('resize', proc.release);

Update! Calling proc.release when it is not a callback for an event listener seems to work. Example:

class AutomatedProcess {
    constructor(trigger, callback) {
        this.Trigger = trigger;
        this.Callback = callback;
    }
    release(event) {
        if (this.Trigger()) {
            this.Callback(event);
        }
    }
}

let proc = new AutomatedProcess(function() { return true; }, function() { console.log('hi');});

proc.release(); // No error here!
ezra
  • 307
  • 3
  • 13
  • See also e.g. https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback – jonrsharpe Mar 29 '20 at 19:15
  • tl;dr: use `release = event => {` instead of `release(event) {`. – Joseph Sible-Reinstate Monica Mar 29 '20 at 19:15
  • @JosephSible-ReinstateMonica thanks! any idea how to use this with webpack? keep getting an error saying `Module parse failed: Unexpected token (35:12)` – ezra Mar 29 '20 at 19:17
  • Replace `window.addEventListener('resize', proc.release);` with `window.addEventListener('resize', () => proc.release.call(proc));` –  Mar 29 '20 at 19:20

0 Answers0