0

我创建了一个这样的模态类：

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”。

4

1 回答 1

4

您已经发现了 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立即停止查找，因为它将在本地将其定义为表单元素）。因为没有本地_thisJavaScript 会沿着链向上走，直到它发现我们的变量，它代表类。

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

于 2012-11-15T14:31:55.397 回答