在这种情况下，Svelte 如何使用“this”关键字？

Question

我正在浏览 Svelte 教程并看到这个示例，但对于它是如何工作的感到困惑。（我删除了一些与问题无关的其他代码，完整示例在这里：https://svelte.dev/tutorial/tick）

<script>
   async function handleKeydown(event) {
     const { selectionStart, selectionEnd, value } = this;

     await tick();
     this.selectionStart = selectionStart;
     this.selectionEnd = selectionEnd;
   }
</script>

<textarea value={text} on:keydown={handleKeydown}></textarea>

有人可以解释一下这里使用“this”的逻辑吗？我不明白它如何知道引用文本区域内的值。它与 textarea 调用的函数以及在引用 textarea 元素的函数内创建上下文是否有关系？

还有为什么像下面的代码这样的东西不起作用？（控制台日志未定义）

function logger(event) {
 console.log(event.value)
}

Answer 1

this由 DOM 提供。

形成 MDN 关于DOM onevent handlers 的文章：

当调用事件处理程序时，this处理程序内的关键字将设置为注册该处理程序的 DOM 元素。

svelte 是一个构建在 DOM 之上的框架，但本质上on:keydown={handleKeydown}转换为具有上述引用属性的 DOM 事件处理程序绑定。