Svelte 5: scope of class `this` changes in handlers depending on how class methods are attached

[arxpoetica]

Describe the bug

The scope of this changes when attaching class method handlers differently to on*.

That is,

<button onclick={() => counter.increment()}>

vs

<button onclick={counter.increment}>

Reproduction

Open the console with both examples to see the output.

Working Example (1)

Attaching and calling from an arrow function.

<button onclick={() => counter.increment()}>

Outputs the Counter {#count: {...}} class instance.

Broken (?) Example (2)

Attaching directly as class method.

<button onclick={counter.increment}>

Clicking the button produces the scope of the <button> element.

This breaks reactivity, so this.count = this.count + 1 is happening on the <button> element instead of the class instance.

Logs

Logs are listed above under <<Reproduction>>.

System Info

n/a -- running on https://svelte-5-preview.vercel.app/ version `5.0.0-next.26`

Severity

annoyance

[adiguba]

Hello,

This is not a bug.
It's how JavaScript work.

The value of this inside the handler is the DOM element on witch it was attached.
Source : https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler

On your first example this is hidden because you use an arrow fonction. Then you call counter.increment() witch will receive another this instance matching counter.

On your second example, you pass counter.increment witch is directly called whis this matching the DOM element (so incorrect based on your code).

To fix that you have to use bind() :

<button onclick={counter.increment.bind(counter)}>

[arxpoetica]

Ah, of course, makes sense.

[joloppo]

This was not the behaviour in svelte 4. Any ideas why it wasn't the behaviour before?

[brunnerh]

It was the same.

In Svelte 4 you probably were not using classes at all because the reactivity system is not suitable for it. (Or the function is defined separately and references the class instance because this is useless.)