Question

我发现拥有像这样的代码是很常见的（这是TypeScript，但是等效的JS是相当明显的，这实际上是一个JS问题，尽管TS可以解决这个问题）：

class Foo {
    someField;

    someMethod() {
        doSomethingTakingACallback(function() {
            this.someField; // Fails because `this` is not the instance of `Foo`
        });
    }
}

当然，解决方案是使用Function.bind()，如下所示：

    someMethod() {
        doSomethingTakingACallback(function() {
            this.someField; // Works as expected
        }.bind(this));
    }

现在的问题是我有必须经常访问对象实例的回调（即，我需要在许多回调上调用bind(this)）。我现在浪费了更多的时间来处理由此引起的错误，而不是我想承认。还有其他选择吗？我错过了一些更简单的方法吗？是否有任何理由认为这是默认行为，而不是我们通过调用bind(this)得到的函数？

我知道的一个解决方案是执行var me = this之类的操作，然后调用me.someField（等）。当我有许多回调或嵌套回调时，它看起来更好一些。虽然我失去了this的标志性，我觉得这是成员所在的最清晰的地方（在我写的课上）。

Answer 1

ES6 Arrow functions保留周围范围的this，因此不需要绑定。

ES7将（可能）拥有:: bind operator

Answer 2

Typescript和ES6 / ES2015都支持“胖箭头函数”语法，它允许您以大多数其他语言的方式使用this来引用类实例对象。

e.g。

    someMethod() {
         doSomethingTakingACallback(() => {
             this.someField;
         });
    }

这将编译为以下代码：

 Foo.prototype.someMethod = function () {
     var _this = this;
     doSomethingTakingACallback(function () {
        _this.someField;
     });
 };

Answer 3

将this分配给回调方法之外的另一个变量并使用它。

class Foo {
    someField : any;

    someMethod() {

        var that = this;
        doSomethingTakingACallback(function () {
           // use that.someField; 
        });
    }
}

用于绑定JS对象以进行回调的解决方案

3 个答案: