TypeScript：如何同时使用胖箭头和这个？

Question

我正在使用非常有用的本地胖箭头在回调中保留this 上下文。但是，有时我需要访问 this 的值，如果我没有使用粗箭头的话。

一个示例是事件回调，其中this 具有事件发生的元素的值（我知道在这个特定示例中您可以使用event.currentTarget，但假设您不能使用举个例子）：

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

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

注意：我遇到过this question，它处理了同样的问题，但在 CoffeeScript 中。

Answer 1

@poke 的回答是正确的想法，但有几个问题：

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

首先，arguments 不是一个真正的数组，所以如上所示调用concat() 会产生一个嵌套数组：

[0] = this
[1] = [ [0] = param1, [1] = param2, ... ]

要解决这个问题，use slice() 将 arguments 转换为真正的数组：

        return callback.apply(null, [this].concat(Array.prototype.slice.call(arguments)));

结果：

[0] = this
[1] = param1
[2] = param2
...

其次，将null 作为第一个参数传递给 apply() 对我不起作用；我必须明确地通过类 Foo 的this。这是一个完整的例子：

class Foo {

    public setClickHandler(checkbox: JQuery): void {
        checkbox.click(this.captureThis(this.onCheckboxClick));
    }

    protected onCheckboxClick(checkbox: HTMLInputElement, event: Event) {
        // 'this' refers to class Foo
    }

    protected captureThis(callback) {
        var self = this;
        return function () {
            return callback.apply(self, [this].concat(Array.prototype.slice.call(arguments)));
        }
    }

}

使用这种方法，onCheckboxClick() 回调可以访问 this 类和在典型的 click 事件回调中本来是 this 的复选框元素（作为第一个参数）。使用 captureThis() 的缺点是你失去了 TypeScript 的回调类型安全性，因此 Typescript 无法阻止你搞乱回调函数签名。

Answer 2

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

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

因此，当您使用胖箭头函数调用 thisAsThat 时，这基本上会返回一个不同的回调函数，该函数在调用时会使用所有参数调用胖箭头函数，但会在前面添加 this 作为参数.由于您无法绑定胖箭头函数，因此您只需调用bind 和apply 就可以了，而不必担心失去价值。

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

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

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

Answer 3

您不需要为此使用箭头函数。

您可以简单地使用函数的bind 来更改函数的作用域：

function callback() {
  // How to access the button that was clicked?
  $("span").text(this.text());
}

var b = $('.button'); // in Typescript you should be using let instead of var
b.click(callback.bind(b));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class='button'>Hello, world!</button>
<span></span>

---

对于其他复杂场景，你想同时使用箭头函数并在同一上下文中调用其他函数，你可以使用Function's callor apply：

// let's suppose your callback function expects a Date and a Number param
$('.button').click(() => callback.call(this, new Date(), 23));
// or
$('.button').click(() => callback.apply(this, [new Date(), 23]));