'This' TypeScript 中的范围

Question

在我的网页上，我删除了 table 中行上的图标，如下所示：

我正在使用 TypeScript，我附加了一个 onClick 侦听器来执行一个名为 OnRemoveClick 的函数，就像这样 $('.remove').click(this.OnRemoveClick);

OnRemoveClick 将 2 个字段置零（在该行上单击删除图标），然后执行 2 个函数，如下所示：

private OnRemoveClick(): void {
    $(this).parents('tr').find('.input-qty').val('0');
    $(this).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

我遇到的问题是当我到达 GetInputFieldsToJson 时它倒下了我得到：

TypeError: this.GetInputFieldsToJson is not a function at HTMLAnchorElement.Index.OnRemoveClick

我意识到这是因为 OnRemoveClick 上下文中的 this 附加到 HTMLAnchorElement，这意味着我无法从那里访问我的函数。

我试过的

我试过用这样的 lambda 表达式设置 onClick 侦听器：

$('.remove').click(() => this.OnRemoveClick);

但这意味着该行上的两个 jQuery 零字段表达式不再起作用

Answer 1

$('.remove').click(() => this.OnRemoveClick); 应该是 $('.remove').click(() => this.OnRemoveClick()); 即 调用函数 。

关于 this 的更多信息：https://www.youtube.com/watch?v=tvocUcbCupA

Answer 2

正如您可能已经理解的那样，这里的问题是，当调用事件处理程序时，默认上下文作为触发该事件的 dom 元素。因此您无法使用该引用调用对象的方法。

这个问题有多种解决方案，一个简单的解决方案是使用 Function.bind() 将自定义上下文传递给回调函数，如下所示，并使用 Event.currentTarget 在回调喜欢

private OnRemoveClick(e): void {
    $(e.currentTarget).parents('tr').find('.input-qty').val('0');
    $(e.currentTarget).parents('tr').find('.sub-total').html('0');
    this.GetInputFieldsToJson();
    this.CalculateTotal();
}

然后

$('.remove').click(this.OnRemoveClick.bind(this));

'This' TypeScript 中的范围

'This' scope in TypeScript

javascript

jquery

this

typescript