TypeScript:如何使用胖箭头和这个？

Question

我正在使用非常有用的本地胖箭头来保留this回调中的上下文.但是,有时我需要访问this如果我没有使用胖箭头就会有的值.

一个例子是事件回调,其中this包含事件发生的元素的值(我知道在这个特定的例子中你可以使用event.currentTarget,但我们假设你不能为了一个例子):

function callback() {
    // How to access the button that was clicked?
}

$('.button').click(() => { callback() });

注意:我遇到过这个问题,它解决了同样的问题,但是在CoffeeScript中.

Answer 1

您可以编写一个装饰器函数，将胖箭头函数包装在另一个函数中，该函数允许访问通常的this值并将该值作为附加参数传递给胖箭头函数：

function thisAsThat (callback) {
    return function () {
        return callback.apply(null, [this].concat(arguments));
    }
}

因此，当您thisAsThat使用胖箭头函数进行调用时，这基本上会返回一个不同的回调函数，该函数在调用时会使用所有参数调用胖箭头函数，但会this在前面添加为参数。由于您无法绑定粗箭头函数，因此您只需调用bindandapply即可，而不必担心丢失该值。

然后你可以像这样使用它：

element.addEventListener('click', thisAsThat((that, evt) => console.log(this, that, evt)));

这将记录this当前作用域的（根据粗箭头规则）、this回调函数的that（指向事件处理程序的元素）和事件本身（但基本上，所有参数仍然传递）。