Question

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

class Something {

    constructor() {

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

这很耗时，很容易忘记绑定方法。我知道有关类字段的建议，但是它仍然是第3阶段，似乎与some issues一起提供。

我当前的解决方案（基于this answer）如下：

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

在ES6中使用fat arrow功能

anotherOne = ()=> {
...
}

像这样的onClick={this.anotherOne};调用无需绑定到构造器中

从ECMA spec

任何引用中的参数，super，this或new.target ArrowFunction必须解析为词法包围中的绑定环境。通常，这将是立即封闭功能。

Answer 2

你也可以像这样使用auto-bind

来自用法示例：

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

Answer 3

您可以使用ES6箭头功能：

method = () => {
    //Do stuff
}

如docs中所述：

箭头函数表达式在语法上是常规函数表达式的紧凑选择，尽管没有与this，arguments，super或new.target关键字的绑定。

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

更新：为什么要这样做？

3 个答案: