javascript - 从同一个类中的另一个方法调用方法

Question

现在我正在尝试从同一个类中的另一个方法调用一个方法。当我尝试这样做时，我得到了错误

this.beginConnDrag 不是函数

这是仅显示重要方法的类的外观。

    class NEditor {
    constructor() {
        ...
    }

    ...

    beginConnDrag(path) {
        if (this.dragMode != 0) return;

        this.dragMode = 2;
        this.dragItem = path;
        this.startPos = path.output.getPos();

        this.setCurveColor(path.path, false);
        window.addEventListener("click", this.onConnDragClick);
        window.addEventListener("mousemove", this.onConnDragMouseMove);
    }

    onOutputClick(e) {
        e.stopPropagation();
        e.preventDefault();
        var path = e.target.parentNode.ref.addPath();
        console.log(e.target.parentNode);
        console.log("output clicked");

        this.beginConnDrag(path);
    }
}

当 onOutputClick() 方法尝试调用 beginConnDrag 组件时，该错误被抛出。如果这些不是静态方法，我不明白为什么不允许此调用。

标签： javascript

Answer 1

您可以使用arrow函数来保持this对象不变：-

class NEditor {
    constructor() {
        ...
    }

    ...

    beginConnDrag = (path) => {
        if (this.dragMode != 0) return;

        this.dragMode = 2;
        this.dragItem = path;
        this.startPos = path.output.getPos();

        this.setCurveColor(path.path, false);
        window.addEventListener("click", this.onConnDragClick);
        window.addEventListener("mousemove", this.onConnDragMouseMove);
    }

    onOutputClick = (e) => {
        e.stopPropagation();
        e.preventDefault();
        var path = e.target.parentNode.ref.addPath();
        console.log(e.target.parentNode);
        console.log("output clicked");

        this.beginConnDrag(path);
    }
}