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;
[在声明函数时,]您可以提供一个显式
this
参数。this
参数是伪造的参数,它们首先出现在函数的参数列表中。
请注意对this
“ fake”参数的描述。在JavaScript中,this
是函数的隐式参数。其值取决于函数的调用方式,并且在调用函数时不能将其作为位置参数提供。TypeScript通过假装它是第一个位置参数来解决此问题(因此称其为“ fake”)。
如果您不熟悉this
JavaScript函数,可能会发现阅读《了解JavaScript函数调用》和“ this”很有用。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句