Question

我有一个包含async.waterfall方法的ES6类。 Waterfall获取一系列函数作为其第一个参数。所以我这样做：

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

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

但如上所述，在第一个函数I中this === null。如果它是anon函数我会写：

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

但是我想要有明确的代码清晰度方法。那么，如何将this传递给类中的命名函数？

Answer 1

您需要将方法绑定到this。以下是一些选项：

选项1 - 在使用它们时绑定它们：

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

选项2 - 在构造函数中绑定它们：

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

选项3 - 使用proposal-class-fields绑定它们，这需要babel的Class properties transform或Stage 2 preset：

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

选项4 - 使用proposal-bind-operator，这需要babel＆＃39; Function bind transform：

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

选项5 - 从箭头功能调用它们：

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

属于数组的函数中的“this”

1 个答案: