如何将类变量传递给带有打字稿的函数内的函数？

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 类也应该这样做，而调用代码不必知道它。