Funktionen und this

vorige Präsentation: Variablen und Scope | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Mehr Funktionen

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

Javascript Code Funktionen definieren

  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:

Javascript Code Funktionen definieren

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

  let r2 = function ( s, x ) {
    let result = "";
    while( x ) {
      result += 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

Javascript Code Arrow Function

  let f1 = ( s, x ) => {
    let result = "";
    while( x ) {
      result += 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:

Javascript Code Arrow Function

  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:

Javascript Code Arrow Function

  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:

Javascript Code Funktionen in JSON

  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:

Javascript Code Methoden 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:

Javascript Code this in einer normalen Funktion

  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:

Javascript Code this in einer Methode

  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:

Javascript Code this in einer Methode

  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

Funktionen und this

vorige Präsentation: Variablen und Scope | zurück zum Buch-Kapitel [esc] | Nächste Präsentation Mehr Funktionen

/

#