Experiment details/summary

[Rolf B]

Hallo 1unitedpower,

nettes Quiz 😂. Ja, ich denke, ich habe das soweit verstanden und musste eigentlich nicht überlegen. Du hast aber insofern recht, dass schon eine halbe Sekunde, die man überlegen muss, zu viel ist. Der Umgang mit this ist einer der ugly parts von JavaScript.

Aber die Regeln sind:

• das Eventhandling des DOM versucht, das this des Handlers an das event-Target zu binden. Das ist HTML-DOM, nicht JavaScript. Der Rest schon.

• eine function bindet ein eigenes this (je nach Aufrufart), ein Lambda bindet sich an das this, das bei seiner Definition gültig ist. Ein Lambda kann nicht mit call oder apply zwangsgebunden werden.

• function foo(args) {} und foo = function(args) {} sind mMn äquivalent

• Eine Eventhandler-Funktion hat deswegen event.target als this und ein Lambda nicht.

• Hinter click4 steht eine IIFE mit einer Lambda-Funktion. Die ruft click2 auf, und zwar sofort. D.h. click4 enthält das, was click2 zurückgibt. Da Lambdas kein this binden, ist this in click2 das gleiche wie im Testrahmen. Was das ist - keine Ahnung. Hängt vom Rahmen ab :)

• click5 ist böse Veräppelung, da wird ein Function-Objekt namens click2 in einer Variablen namens click5 gespeichert.

Also:
1: element
2: Rahmen-this
3: element
4: vermutlich sinnlos, click2 dürfte keinen Eventhandler zurückgeben
5: element
6: element
7: Rahmen-this
8: element. NICHT das Objekt, da sind schon viele drüber gestolpert
9: dito
10: Da musste ich doch überlegen. Ich denke, es ist das Rahmen-this, weil keine Objektmethode aufgerufen wird.

Der hier:

element.addEventListener('click', ({getclick: function() { return () => { /* */ }}}).getclick());

wäre was anderes, da während des getclick-Aufrufs this das literale Objekt ist und das Lambda deshalb daran gebunden ist.

Rolf