我创建了一个这样的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”。
答案 0 :(得分: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
,因为它将在本地定义为表单元素)。因为没有本地_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类也应该这样做,而调用代码不必知道它。