Javascript 类丢失了对 'this' 的引用(使用 babel)

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

已关闭 6 年前。

class UrlProvider {
    constructor(root) {
        this.root = root;
    }

    getUrl() {
        return this.root + "/api/Situations";
    }
} 


class Repository {
    constructor(urlProvider) {
        this.urlProvider = urlProvider;
    }

    getAsync() {
        var self = this;
        return httpGetAsync(self.urlProvider.getUrl()).then(function(d) {
            return d.map(x => new Situation(x));
        });
    }
}



class PromiseCacher {
    constructor(cache, promise) {
        var self = this;
        self.cache = cache;
        self.promise = promise;
    }
    runAsync() {
        var self = this;

        return self.promise().then(function (d) {
            self.cache.set(d);
            return d;
        });
    }
}

var urlProvider = new UrlProvider(appsettings.url);
var repository = new Repository(urlProvider);
var cache = new Cache();

var promiseCacher = new PromiseCacher(cache, repository.getAsync);

promiseCacher.runAsync()

调试上述代码时，chrome会在存储库的getAsync函数内崩溃，因为self.urlProvider未定义。在存储库中，getAsync 函数“this”指的是 PromiseCacher 的实例，这也是实际调用它的实例。

发生什么事了？

重写

var promiseCacher = new PromiseCacher(cache, ()=> repository.getAsync());

使其按照我的预期工作。

Answer 1

这是因为首先 repository.getAsync 不是一个 promise 。相反，它是一个函数。通过将 repository.getAsync 的引用存储到不同的对象属性，您可以“更改”其 this 值。看一下下面的例子:

var obj = {
    a: 42,
    func: function(){
        return this.a;
    }
};

obj.func();  // 42

var b = obj.func;
b();         // undefined

该示例与您的代码相当:

class Repository{
    // urlProvider = ...
    getAsync (){ /* ... */ }
}

var repo = new Repository(/* ... */);
repo.getAsync();  // works

var cacher = new PromiseCacher(/* ... */);
cacher.promise = repo.getAsync;
cacher.promise();  // does not work