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

如何将一个类变量传递给一个带有typescript的函数内的函数？

1 个答案: