Funktionen und this

In Javascript kann eine Funktion mit Namen definiert werden, oder anonym:

  function r1( s, x ) {
    let result = "";
    while( x ) {
      result += s;
      x--;
    }
    return result;
  }

  function ( s, x ) {
    let result = "";
    while( x ) {
      result += s;
      x--;
    }
    return result;
  }

  // Aufruf:
  r1('*', 10);

Die zweite Funktion kann aber nicht aufgerufen werden.

▻

Damit man eine anonyme Funktion verwenden kann, muss sie erst auf eine Variable zugewiesen werden:

  function r1( s, x ) {
    ...
    return result;
  }

  let r2 = function ( s, x ) {
    ...
    return result;
  }

  // Aufruf:
  r1('*', 10);
  r2('*', 10);

▻

Seit Javascript 2015 gibt es doch eine weitere Schreibweise für anonyme Funktionen: die Arrow Function

  let f1 = ( s, x ) => {
    ...
    return result;
  }

Wenn die Funktion nur eine einzige Expression enthält wird die Schreibweise noch kürzer, man braucht gar kein return mehr:

  let f2 = ( s, x ) => s + " mal " + x;

Und wenn die Funktion nur ein Argument nimmt kann man auch noch die Klammern rund um die Argumente weglassen:

  let f3 = x => `${x} ist das beste`;

▻

Wir haben auch schon die JSON-Schreibweise von Arrays und Objekten kennen gelernt. Kombiniert mit der anonymen Schreibweise für Funktionen können wir so Funktionen als Teile von Objekten oder Arrays definieren:

  objekt = {
    prop1 : "Schokolade",
    prop2 : 42,
    method_1 : function (x) { return `${x} ist schlecht` },
    method_2 : x => `${x} ist gut`
  }

Die beiden Methoden kann man ganz normal aufrufen:

objekt.method_1("Kopfweh");
objekt.method_2("Eis");
objekt.method_2(objekt.prop1);

Achtung: Wenn das Objekt serialisiert wird, also in einem String gespeichert wird - z.B. um das Objekt in LocalStorage zu speichern oder über HTTP zu verschicken - dann gehen die Funktionen verloren!

▻

Was ist this?

Die Variable this hat eine besondere Bedeutung in Javascript Funktionen. Erst einmal verweist this auf das window Objekt:

  console.log("this = " + this);

  function what_is_this() {
    console.log("this = " + this);
  }
  what_is_this();

  // output auf der Console:
  // this = [object Window]
  // this = [object Window]

▻

Wird eine Funktion als Methode eines Objekts aufgerufen, dann verweist this auf das Objekt:

  var objekt = {
    prop1 : "string",
    prop2 : 42,
    report : function () {
      console.log( "this = " + this )
      console.log( "this.prop2 = " + this.prop2 )
    }
  }

  objekt.report();

  // output auf der Console:
  // this = [object Object]
  // this.prop2 = 42

Achtung: Arrow Functions verhalten sich hier anders!

▻

Eine Arrow Function hat nie ein eigenes this. Wird eine Methode mit einer Arrow Function definiert, dann bezieht sich this also nicht auf das aufrufende Objekt, sondern behält seinen Wert:

  var objekt = {
    prop1 : "string",
    prop2 : 42,
    broken_report : () => {
      console.log( "this = " + this )
      console.log( "this.prop2 = " + this.prop2 )
    }
  }

  objekt.broken_report();

  // output auf der Console:
  // this = [object Window]
  // this.prop2 = undefined