在 TypeScript 中使用箭头函数：如何使它们成为类方法？

Posted 2023-03-13

【中文标题】在 TypeScript 中使用箭头函数：如何使它们成为类方法？

【英文标题】：Using arrow functions in TypeScript: how to make them class methods?

【发布时间】：2012-11-30 19:15:22

【问题描述】：

我的编程经验相当丰富，但对 TypeScript 还是很陌生。

尝试将它与 jQuery 一起使用并立即遇到回调的“this”问题（例如 $(document).ready。

使用 $.proxy() 是一种方法，但使用 TypeScript 的箭头 (lambda) 函数似乎要好得多。但我只看到它们用作表达式——即整个函数是内联定义的。我希望能够设置可以作为我的类的方法调用的箭头函数，例如（在伪代码中）：

class Something 
    constructor() 
    $(' nav li').click(this.menuClick);
    
 private menuClick (and this would be an arrow function to preserve 'this')()=>    
  // it would call this.anotherMethod()
  // plus lots of other things so it won't easily fit inline

 private anotherMethod():void 
        // do something on the menu click, several lines perhaps, 
  

我来自 AS3 的 OOP 背景，这就是我能够做到这一点的方式——“this”很容易访问，或者很清楚如何访问它。我热衷于使用 TypeScript 来克服我在使用纯 javascript 时遇到的 OOP 障碍——但是（对我来说）必须代理所有 jQuery 调用似乎很麻烦（我知道那里有一些类可以做到这一点）我，但是有没有更简单的方法，带有箭头/lambda函数？）。

如果我不理解显而易见的事情，请耐心等待，但对我来说并不明显！

【参考方案1】：

默认情况下无法执行此操作的原因是，如果自动完成，就每个实例的内存消耗而言，这是一个巨大的运行时成本。与其拥有一个包含所有函数的基本原型对象，并且每个类实例都指向该原型的函数定义，不如最终为类的每个实例的每个函数都有一个闭包。 p>

未来可能会有更好的类型系统支持，但目前，处理this 绑定问题只是编写任何风格的 JavaScript 时必须支付的税。希望随着 TypeScript 之类的发展势头强劲，库作者将减少对 this-stomping 的使用（尽管 DOM 永远不会有这种奢侈）。

好处是，在 TypeScript 中，当您确实需要重新绑定 this 时，代码量并不多：

$(' nav li').click(() => this.menuClick());

或

$(' nav li').click(this.menuClick.bind(this));

【讨论】：

谢谢。当我编译代码$(' nav li').click(() => this.menuClick()); 时，我得到Supplied parameters do not match any signature of call target 的那行代码，因为我使用参数定义menuClick，所以我可以访问单击的元素，因此：private menuClick(event:JQueryEventObject):void var li:JQuery = $(event.target).closest('li'); --- 我将如何进行箭头调用那么正确吗？

这应该可以工作：$('nav li').click((eventData) => this.menuClick(eventData));

【参考方案2】：

简短的回答：

如果你改变：$(' nav li').click(this.menuClick);

转入：$(' nav li').click(() => this.menuClick());

那么this 将成为menuClick 方法中的类'Something'。