javascript - Eventlyssnares parametrar


TypeScripts typsdefinitionsfil för ES6 (lib.es6.d.ts) definierar addEventListener på fönsterobjektet enligt följande:

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

Som synes definierar det lyssnaren som att ha två parametrar: this och ev.

Som vi vet är ev händelseobjektet och this är DOM-elementet som event utlöstes från. Vi vet också att webbläsaren automatiskt skickar dessa argument till händelselyssnaren när händelsen inträffar.

Fråga

När jag skapar en hanterare och kontrollerar längden på dess argument, får jag veta att det bara finns ett:

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]);
}

Så jag undrar, varför säger metoddefinitionen att det finns två parametrar, när det i själva verket bara finns en?

Sidnot

Detta är inte specifikt för addEventListener. onclick-metoden, till exempel, har följande typdefinition:

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

Svar #1

Enligt Typescript-dokumentationen om funktioner:

[När du deklarerar en funktion,] kan du ange en explicit this-parameter. this-parametrar är falska parametrar som kommer först i parameterlistan för en funktion.

Observera beskrivningen av this som en "falsk" parameter. I JavaScript är this en implicit parameter för funktioner. Dess värde bestäms av hur funktionen anropas, och det kan inte tillhandahållas som ett positionsargument när man anropar en funktion. TypeScript hanterar detta genom att låtsas att det är det första positionsargumentet (därav kallar man det "falskt").

Om du är obekant med this i JavaScript-funktioner kan du tycka att det är värdefullt att läsa Understanding JavaScript Function Invocation and "this".

Svar #2

this visas inte i argumentlistan eftersom det egentligen inte är en parameter, bara en referens till det anropande objektet. I exemplet med händelselyssnaren hänvisar this till fönsterobjektet.

dessa parametrar är falska parametrar som kommer först i funktions parameterlista:

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