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 关于 内联事件处理程序中的 this 的文章：

当从内联事件处理程序属性调用代码时，其 this 绑定到放置侦听器的 DOM 元素。

svelte 是一个构建在 DOM 之上的框架，但本质上

on:keydown={handleKeydown}

转换为具有上述引用属性的 DOM 事件处理程序绑定。