关于this: void

Question

interface UIElement {
addClickListener(onclick: (this: void, e: Event) => void): void;
}
class Handler {
type: string;
onclickBad = (e: Event) => {
this.type = e.type;
};
}
let h = new Handler();
let uiElement: UIElement = {
addClickListener(onclick: (this: void, e: Event) => void) {}
};
uiElement.addClickListener(h.onclickBad);
老师,这段代码addClickListener(onclick: (this: void, e: Event) => void) {}里面this的类型是void有什么用呢?是代表this的值是不存在的吗?那onclickBad里采用箭头函数,箭头函数的this和this:void不会冲突吗?

Answer 1

ustbhuangyi 2019-06-13 09:52:57

这个是 this 参数，this 参数是个假的参数，它出现在参数列表的最前面，this: void 意味着 addClickListener 期望传入的 onclick 方法不需要 this，这个是给 TypeScript 编译器看的。
而箭头函数的 this 就是它所在上下文的this值， 作为自己的this值。并且在箭头函数中，是没法使用 this 参数的。

• 提问者 biubiuQAQ #1

  this: void就表示函数的参数不需要传this值,而是使采用箭头函数的this值吗,这一这样理解吗?

• ustbhuangyi 回复 提问者 biubiuQAQ #2

  this: void 就表示函数中的 this 是 void，因为显示地说明了，你就不能用 this.xxx，这样就避免了运行时的一些 bug。
  
  你一旦用箭头函数，this 参数就没意义了，因为 this 总指向它所在上下文的 this 值。

• 提问者 biubiuQAQ 回复 ustbhuangyi #3

  哦哦,明白了,谢谢老师