JS：在无上下文函数调用中反弹“this”

Question

由于app.populateDatabase 内部的无上下文调用，此示例中的函数doSomethingElse 无法执行，因为它的this 已被重新绑定到window 或global（如果在Node 中）。

有没有办法避免这种情况而不在每个函数中引用app？

loadDatabase函数根据逻辑语句执行回调，如果虚构的数据库不存在，加载后填充，然后populateDatabase执行已提供的回调。

我无法将onLoaded 参数重新绑定到app，因为我不知道它来自哪里，并且过度使用绑定/应用/调用抽象会造成相当混乱。

var app = {};
app.loadDatabase = function(onLoaded) {

    // If database already exists, only run a callback
    var callback = onLoaded;

    // If database doesn't exists, populate it, then run a callback.
    if (!databaseExists) {
        callback = this.populateDatabase.bind(this, onLoaded);
    }

    this.database = new sqlite.Database("file.db", function(error) {
        if (error) { ... }

        callback();
    })

}

app.populateDatabase = function(onPopulated) {

    // Contextless call here. <--------
    onPopulated();
}

app.doSomethingElse = function() {

    // this != app due to contextless call.
    this.somethingElse();
}

app.run = function() {

    // Load the database, then do something else.
    this.loadDatabase(this.doSomethingElse);
}

app.run();

Answer 1

只需将this.loadDatabase(this.doSomethingElse); 替换为this.loadDatabase(() => this.doSomethingElse());。这样您就可以创建一个新的箭头函数，但随后会使用正确的 this 上下文调用 doSomethingElse。

您也可以使用.bind，但我推荐使用箭头功能。这里有bind：this.loadDatabase(this.doSomethingElse.bind(this))

---

一般考虑转向 Promise 和异步函数。然后这样做：

this.loadDatabase().then(() => this.doSomethingElse());

或者更好的异步函数：

await this.loadDatabase();
this.doSomethingElse();