Question

TypeScript的ES6类型定义文件（lib.es6.d.ts），在窗口对象上定义addEventListener，如下所示：

addEventListener<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

如图所示，它将侦听器定义为具有两个参数：this和ev。

众所周知，ev是事件对象，this是event被触发的DOM元素。我们还知道，当事件触发时，浏览器会自动将这些参数传递给事件监听器。

问题

当我创建一个处理程序并检查其参数的长度时，我被告知只有一个：

window.addEventListener('keydown', myHandler2);

function myHandler2() {
    // Output of the below is: args length: 1, arg 1: [object KeyboardEvent]
    console.log('args length: ' + arguments.length + ', arg 1: ' + arguments[0]);
}

因此，我想知道，为什么方法定义告诉我有两个参数，实际上只有一个参数？

旁注

这不是特定于addEventListener。例如，onclick方法具有以下类型定义：

onclick: (this: HTMLElement, ev: MouseEvent) => any;

Answer 1

this没有显示在参数列表中，因为它不是一个真正的参数，只是对调用对象的引用。在事件中，侦听器示例this引用窗口对象。

此参数是假函数，它们首先出现在函数的参数列表中：

https://www.typescriptlang.org/docs/handbook/functions.html

Answer 2

每How to use ThreeTenABP…：

[声明函数时]，您可以提供明确的this参数。 this参数是假函数，它们首先出现在函数的参数列表中。

请注意this作为“假”参数的说明。在JavaScript中，this是函数的隐式参数。它的值由the Typescript docs on functions确定，并且在调用函数时不能将其作为位置参数提供。 TypeScript通过假装它是第一个位置参数（因此将其称为“假”）来解决这个问题。

如果您不熟悉JavaScript函数中的this，您可能会发现阅读how the function is called很有价值。

事件监听器的参数

2 个答案: