什么是自动绑定JS类方法的好方法？

Question

我厌倦了编写这样的代码：

class Something {

    constructor() {

        this.method = this.method.bind(this);
        this.anotherOne = this.anotherOne.bind(this);
        // ...
    }
}

很费时间，而且很容易忘记绑定一个方法。我知道 class fields 提案，但它仍然是第 3 阶段，似乎有一些问题。

我当前的解决方案（基于此答案）如下所示：

class Something {

    constructor() {

        // Get all defined class methods
        const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(this));

        // Bind all methods
        methods
            .filter(method => (method !== 'constructor'))
            .forEach((method) => { this[method] = this[method].bind(this); });
    }
}

这似乎有效，但我想知道是否有更好的方法，或者此方法是否存在我不知道的问题。

更新：为什么要这样做？

我遇到的问题是，如果我没有在构造函数中绑定我的类函数，我必须记住以后“正确地”调用它们。例如：

const classInstance = new Something();

// This fails for a non-obvious reason
someAction()
    .then(classInstance.method);

// This works of course but looks like we created a useless function if you don't know better
someAction()
    .then(result => classInstance.method(result));

Answer 1

回答这个问题似乎有点晚了，但没有公认的答案，所以我会尽力为在我之后来到这里的人提供帮助。

要自动绑定this所有方法，您可以使用“箭头”功能：

class Something {
  constructor() {
    // Don't need to bind `this`
  }

  doSomething = () => {
    console.log(this); // `this` will be pointed to the instance
  }
}

const s = new Something();
s.doSomething(); // => `this` is pointed to `s`

注意：只需确保扩展此类的类Something不会doSomething在其中使用方法 constructor （例如super.doSomething()：），否则您将收到错误。

回答更新的问题：如果您不this使用.call()or手动绑定.apply()，则 的值this取决于调用该方法的方式

例如：

class Something {
  constructor() {
    // didn't bind `this` here
  }

  doSomething() {
    console.log(this);
  }
}

const s = new Something();
const funcA = s.doSomething;
const object = {
  funcB: s.doSomething,
};

// these ways of calling `.doSomething()` result in different values of `this`:
funcA(); // => `this` is pointed to the global variable (`window` in browser environment)
window.funcA(); // => same as `funcA()`
s.doSomething(); // => `this` is pointed to `s`
object.funcB(); // =? `this` is pointed to `object`

除此之外，.then()方法的实现类似如下：

class Promise {
  // ...
  then(callback) {
    // code...
    callback(); // notice how the `callback` is called - not as a method of an object
    // code...
  }
}

在您的代码示例中，将回调传递到方法中的方式将影响回调内部.then()的值：this

const classInstance = new Something();

// `this` inside `classInstance.method` is pointed to `this` inside the
// `.then` method, not the `classInstance`, as `classInstance.method()`
// will be called as `callback()`
someAction()
    .then(classInstance.method);

// `this` inside `classInstance.method` is pointed to `classInstance`,
// as the way the anonymous "arrow" function is called does not affect the way
// `classInstance.method` is called, so `this`'s value is controlled by the way
// you call it inside the callback (anonymous "arrow" function) of `.then()`
// method.
someAction()
    .then(result => classInstance.method(result)); 

Answer 2

在 ES6 中使用粗箭头函数（一般称为箭头函数）

anotherOne = ()=> {
...
}

像这样调用onClick={this.anotherOne};不需要在构造函数中绑定

来自ECMA 规范

ArrowFunction 中对参数、super、this 或 new.target 的任何引用都必须解析为词法封闭环境中的绑定。通常，这将是直接封闭函数的函数环境。

Answer 3

您也可以像这样使用自动绑定

从用法示例：

const autoBind = require('auto-bind');

class Unicorn {
    constructor(name) {
        this.name = name;
        autoBind(this);
    }

    message() {
        return `${this.name} is awesome!`;
    }
}

const unicorn = new Unicorn('Rainbow');

// Grab the method off the class instance
const message = unicorn.message;

// Still bound to the class instance
message();
//=> 'Rainbow is awesome!'

// Without `autoBind(this)`, the above would have resulted in
message();
//=> Error: Cannot read property 'name' of undefined