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

Rob*_*ert 6 javascript jquery lambda typescript arrow-functions

我是相当有经验的编程,但对TypeScript来说还是一个新手.

试图将它与jQuery一起使用并立即遇到回调问题(例如$(document).ready.

使用$ .proxy()是一种方法,但使用TypeScript的arrow(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, 
  }

}
Run Code Online (Sandbox Code Playgroud)

我来自AS3的OOP背景,这就是我能够做到的 - "这个"很容易获得,或者很清楚如何访问它.我很想使用TypeScript来克服我在Javascript中遇到的OOP障碍 - 但是对我来说,代理所有jQuery调用似乎很麻烦(我知道有些类可以用来代替我,但有一个更简单的方法,使用箭头/ lambda函数?).

如果我不是很明显的话,请耐心等待,但这对我来说并不明显!

Rya*_*ugh 10

默认情况下无法实现此目的的原因是,如果自动完成,则每个实例的内存消耗会产生巨大的运行时成本.而不是让一个基本原型对象包含其中的所有函数,并且每个类实例指向该原型的函数定义,最终每个函数的每个实例都有一个闭包.

将来可能会有更好的类型系统支持,但是现在,处理this绑定问题只是在编写任何风格的JavaScript时必须支付的税.希望像TypeScript这样的东西获得动力,图书馆作者将减少他们的使用 - this尽管DOM永远不会有这种奢侈.

好处是,在TypeScript中,当您需要重新绑定时,代码量不是很多this:

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

要么

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

  • 这应该工作:$('nav li').click((eventData)=> this.menuClick(eventData)); (2认同)