"this" in functions belonging to an array

Question

I have a ES6 class that contains a method with async.waterfall. Waterfall gets an array of functions as its first argument. So I do it this way:

class RequestLog {
    mainMethod() {
        async.waterfall([
            this.method1,
            this.method2,
            this.method3
        ]);
    }

    method1(cb) {
        console.log(this); // outputs null
        cb();
    }
}

But as noted above, in first function I nave this === null. If it was anon function I'd write:

async.waterfall([ (cb) => { console.log(this) } ]);

but I want to have separated methods for code clarity. So, how do I pass this to named function inside a class?

Answer 1

You'll need to bind the methods to this. Here are some options:

Option 1 - bind them when you use them:

mainMethod() {
    async.waterfall([
        this.method1.bind(this),
        this.method2.bind(this),
        this.method3.bind(this)
    ]);
}

Option 2 - bind them in the constructor:

class RequestLog {
  constructor() {
    this.method1 = this.method1.bind(this);
    this.method2 = this.method2.bind(this);
    this.method2 = this.method3.bind(this);
  }
  ...
}

Option 3 - bind them using proposal-class-fields, which requires babel's Class properties transform or Stage 2 preset:

class RequestLog {
    method1 = (cb) => {
        console.log(this); // outputs null
        cb();
    }
}

Option 4 - use proposal-bind-operator, which requires babel's Function bind transform:

mainMethod() {
    async.waterfall([
        ::this.method1,
        ::this.method2,
        ::this.method3
    ]);
}

Option 5 - call them from an arrow function:

mainMethod() {
    async.waterfall([
        (cb) => this.method1(cb),
        (cb) => this.method2(cb),
        (cb) => this.method3(cb)
    ]);
}