Fat Arrows | this

[heinetz]

Hallo Forum,

ich versuche seit kurzem mich in die Syntax mit Fat Arrow-Funktionen einzuarbeiten und komme hier nicht weiter:

export default class Footer extends BaseModule {
  constructor(element) {
    this.init();
  }

  init() {
    new window.Waypoint({
      element: this.elements.self,
      handler: function(direction) {
        console.log('handler()');
        console.log(this);
      }
    });
  }
}

Während in dem obigen Beispiel die Methode handler() mit console.log(this) das Waypoint-Objekt ausgibt ...

export default class Footer extends BaseModule {
  constructor(element) {
    this.init();
  }

  init() {
    new window.Waypoint({
      element: this.elements.self,
      handler: direction => {
        console.log('handler()');
        console.log(this);
      }
    });
  }
}

... wird bei Verwendung der Fat Arrow-Syntax das Foster-Objekt ausgegeben.

So weit so gut. Das habe ich nun auch schon mehrfach gelesen, aber wie schaffe ich es, unter Verwendung der Fat Arrow-Systax in der methode handler() auf das Waypoint-Objekt zuzugreifen?

beste dank für Tipps und Gruss, heinetz

[dedlfix]

Tach!

So weit so gut. Das habe ich nun auch schon mehrfach gelesen, aber wie schaffe ich es, unter Verwendung der Fat Arrow-Systax in der methode handler() auf das Waypoint-Objekt zuzugreifen?

Indem du dir eine Referenz dazu in einer Variable ablegst, oder in eine Eigenschaft des Footer-Objekts.

dedlfix.

[heinetz]

😉 Ja, irgendwie logisch. Danke

[Rolf B]

Hallo heinetz,

new window.Waypoint({
      element: this.elements.self,
      handler: function(direction) {
        console.log('handler()');
        console.log(this);
      }
    });

Ich bin mit der neueren OOP-Syntax von JS noch nicht sattelfest (weil ich für IE11 programmieren muss und darum diese Syntax nicht nutzen kann, ohne meine Toolchain mühsam zu verlängern). Deswegen deute ich vielleicht was falsch.

Aber für mich sieht das aus wie ein Konstruktoraufruf, der ein Objekt übergeben bekommt. Dieses Objekt hat eine Eigenschaft element, und weil das ein Konstruktorparameter ist, ist das this, das beim Zuweisen dieser Eigenschaft verwendet wird, das Footer Objekt. Die zweite Einenschaft ist die Methode handler, und welchen Wert this in dieser Methode hat hängt vom Aufruf ab.

EVENTUELL ist der Waypoint-Konstruktor so programmiert, dass er die Eigenschaften dieses Objekts auf die Eigenschaften des erzeugten Waypoint-Objekts kopiert. Das ist dann aber eine Waypoint-Eigenschaft, keine von JavaScript. Und dann würde die handler-Funktion das Waypoint-Objekt als this erhalten. Alternativ könnte Waypoint die handler-Funktion so aufrufen, dass es sich selbst als this übergibt (mittels handler.call oder handler.apply).

Arrow-Funktionen haben dagegen kein eigenes this, d.h. an dieser Stelle wird das this des Aufrufkontextes gebunden. Deswegen sollte es so sein, dass das this der handler-Funktion das Footer-Objekt referenziert. Ein Aufruf mit .call oder .apply hat keinen Effekt.

Rolf