javascript - “this”在类里面未定义

Question

看看下面的代码。

我正在创建一个带有构造函数的类，我在其中创建了一些变量。此外，我正在创建一些异步函数，其中 3 个非常相似，最后一个可以调用其他函数。

class Project {
    data = {};
    constructor(project, api) {
        for (const key in project) {
            this.data[key] = project[key];
        }
        this.logger = new Logger(
            document.querySelector("#output"),
            `Project= ${this.data.projectId}: `
        )
        this.api = api;
    }
    async getTasks() {
        return await this.api.getTasksAsync(this.projectId);
    }
    async getRequirements() {
        return await this.api.getRequirementsAsync(this.projectId);
    }
    async getReleases() {
        return await this.api.getReleasesAsync(this.projectId);
    }
    async getToDraw(type) {
        let func = this[`get${type}`];
        console.log(func);
        let result = [];
        for (let item of await func()){
            result.push(toTaskItem(item));
        }
        return result;
    }
}

在“项目”类的已启动对象上执行函数“getToDraw”时出现的错误(上图):

我调用函数如下:

async drawDiagram(sender){
    let projectID = this.getSelectedValue("projectSelector");
    if (projectID !== "-1") {
        let project = this.projects.filter((project) => project.data.ProjectId === parseInt(projectID))[0];
        if (document.querySelector("#typeSelector").selectedOptions[0].innerText === "Full"){
            // TODO: 
        } else {
            let list = await project.getToDraw(document.querySelector("#typeSelector").selectedOptions[0].innerText);
            console.log(list);
        }
    } else {
        for (let project of this.projects) {
            // TODO:
        }
    }
}

如果没有人知道我的解决方案，我已经知道如何用另一种方式来做，但我想这样做......

谢谢，伙计们。

Answer 1

看看这一行

let func = this[`get${type}`];

它将函数从 this 引用解除绑定(bind)(或“断开连接”)到类，这样当您调用 func() 时，this 变为 undefined。

有几种方法可以解决这个问题。您可以使用 bind 重新绑定(bind) this ，像这样:

let func = this[`get${type}`].bind(this);

或者您可以显式地重新绑定(bind)构造函数中的方法:

class Project {
  constructor(project, api) {
    ...
    this.getTasks = this.getTasks.bind(this);
    this.getRequirements = this.getRequirements.bind(this);
    this.getReleases = this.getReleases.bind(this);
  }
}

或者您可以将您的方法定义为 lambda 表达式属性，如下所示:

class Project {
  data = {};
  getTasks = () => { ... };
  getRequirements = () => { ... };
  getReleases = () => { ... };
}

当然，这些并不是唯一的解决方案，它们可能会有一些不同的副作用。例如，lambda 表达式属性是可枚举的，因此它们将出现在 Object.keys(new Project()) 中。