javascript - 如何使用 typescript 将类变量传递到函数内的函数中？

Question

我创建了一个像这样的 Modal 类:

export class Modal {
        link: Link;
        constructor (link: Link) {
            this.link = link;
        }
        create() {
            this.link.Modal.$Modal = $.modal({ });
        }
        addSubmit() {
            this.link.Modal.$Form.submit(function () {
                var a = this.link;
                submitHandler(this.link);
                return false;
            });
        }
}

这是我正在使用的代码:

var modal = new Modal(link);
modal.create();
modal.addSubmit();

这里有问题。我想将链接作为参数传递给submitHandler 函数。然而它似乎不存在。另外，当我检查“var a = this.link”行上的所有内容时，当我将鼠标悬停在变量“a”、“this”和“link”上时，它们似乎都显示为“any”。

Answer 1

您已经发现了 JavaScript 作用域 - 一开始可能会令人困惑。

JavaScript 具有函数作用域。这意味着变量属于声明它们的函数。

当变量在函数外部声明时，JavaScript 会尝试沿着链向上查找变量。

当您键入代码的上下文不是调用代码的上下文时，这会令人困惑。在您的情况下，提交函数上下文中的 this 是正在提交的元素(例如表单元素)。它不是您编写提交函数的类。

这是一个应该有效的更新:

export class Modal {
    link: Link;
    constructor (link: Link) {
        this.link = link;
        this.link.Modal.$Modal = $.modal({ });
    }

    addSubmit() {
        var _this = this;
        this.link.Modal.$Form.submit(function () {
            var a = _this.link;
            submitHandler(_this.link);
            return false;
        });
    }
}

在此示例中，我们将 this 放入一个名称不会被覆盖的变量中，以便 JavaScript 运行时在找到它之前不会停止查找。 (它将立即停止寻找this，因为它将在本地将其定义为表单元素)。由于没有本地 _this JavaScript 将沿着链向上走，直到发现代表该类的变量。

TypeScript 中还有一个简写方法可以做到这一点，这会产生与我们上面手写的相同的 JavaScript:

export class Modal {
    constructor (public link: Link) {
        this.link.Modal.$Modal = $.modal({ });
    }

    addSubmit() {
        this.link.Modal.$Form.submit(() => {
            var a = this.link;
            submitHandler(this.link);
            return false;
        });
    }
}

最后，您不希望调用代码必须依赖于以特定顺序调用函数才能正常工作。这是公开类的内部工作原理的示例，因此我已将该类的用法更新为:

var modal = new Modal(link);
modal.addSubmit();

我假设 addSubmit 是可选的 - 否则 Modal 类也应该这样做，而调用代码不必知道它。