typescript - 编译后的 Type Script 指的是全局作用域的 this

Question

大家好，我是 TypeScript 的新手。我正在尝试编写一些函数，引用 this of Function，编译后我得到了 this of Window。我不明白为什么要这样做。感谢您的任何建议。这是代码

TS

var checkSection  = () => {
$('.section').each((index)=> {
        var $this     = $(this),
            topEdge:number   = $this.offset().top,
            bottomEdge:number = topEdge + $this.height(),
            wScroll:number   = $(window).scrollTop();

        if(topEdge < wScroll && bottomEdge > wScroll) {
            var current:string = $this.data('section');
            console.log('current data attribute ' + current);
            console.log('current index ' + index);
        }
    })
}

JS输出

var _this = this;
var checkSection = function () {
    $('.section').each(function (index) {
        var $this = $(_this), 
            topEdge = $this.offset().top, 
            bottomEdge = topEdge + $this.height(),
            wScroll = $(window).scrollTop();

        if (topEdge < wScroll && bottomEdge > wScroll) {
            var current = $this.data('section');
            console.log('current data attribute ' + current);
            console.log('current index ' + index);
        }
    });
};

Answer 1

这就是arrow operator用于 - 维护 this 的上下文，以便它与声明函数的上下文相同。如果您不想要这种行为，请不要使用 =>。使用函数。

或者，不要假设 jQuery 回调中的 this 是对当前元素的引用。相反，使用传递给 .each 回调的元素的句柄:

$('.section').each(function (index, element) {
  var $this = $(element)