在这种情况下，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提供。

在 DOM onevent handlers 上形成 MDN 文章：

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered.

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

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

How is Svelte using the 'this' keyword in this scenario?

javascript

events

dom

this

svelte