打字稿这被jQuery悬停覆盖

Question

当您使用像$(".element").hover(functionHoverIn,functionHoverOut) 这样的jquery 悬停绑定时，jquery 似乎将悬停的元素传递为this。像这样：

$('.element').hover(function(e) { 
         $(this).attr("data-hovered", "true");
         //do whatever else
     }, function(e) {
         //etc
     }
}

它很有用，因此在这些匿名函数中，我们可以通过this 或$(this) 访问元素。 但是，它似乎与打字稿冲突。或者我有什么不明白的地方：

class FancyHover {
    HoverElement:JQuery;

    constructor(HoverElement:JQuery) {
        this.HoverElement = HoverElement;
        this.HoverElement.hover(this.HandleHover, this.HandleHover);
    }

    HandleHover(event:JQueryEventObject):void {
        $(event.currentTarget).toggleClass("hovered");

        this.OtherFunction(); //Throws error
        //Uncaught TypeError: Object #<HTMLDivElement> has no method 'OtherFunction' 
    }

    OtherFunction():void {
        //do anything
    }
}

理想情况下，我希望将一个函数（例如this.HandleHover）传递给.hover(functionIn,functionOut) 调用而不是匿名函数。但是，当我这样做时，我失去了引用当前 FancyHover 实例的能力。也许我可以以某种方式将当前实例传递给函数 HandleHover？

Answer 1

如果您想使用回调提供的this 以及类实例的this，则需要手动执行此操作，例如：

constructor() {
    // ...
    var self = this;
    this.HoverElement.hover(function(event) { self.HandleHover(event, this); });
}

HandleHover(event: JQueryEventObject, jqueryThis: JQuery) {
    $(jqueryThis).attr(/*etc*/);
    this.OtherFunction();
}