Achtung: Arrow-Funktionen sind Teil der nächsten ECMAScript-Version (ES6/ES2015) und stehen uns derzeit in den meisten Browsern nicht oder nur teilweise zur Verfügung. Wer sie dennoch benutzen möchte, kann einen Transpiler wie Babel oder Traceur nutzen.

Wahrscheinlich kennt jeder das Problem mit dem this-Wert und Callback-Funktionen. Wer das Problem nicht kennt, kann in unserem Post hier darüber lesen. Eine beliebte Lösung für das Problem ist es, außerhalb der Callback-Funktion den this-Wert einer anderen Variablen zuzuweisen. Oft wird diese Variable that, self oder auch _this benannt. Mit den Arrow-Funktionen, auch bekannt als fat arrow functions, haben wir eine weitere Lösung für dieses Problem.

Bei einer normalen Funktion/Methode wird der this-Wert beim Aufruf gebunden, aber bei den Arrow-Funktionen wird der this-Wert bei der Definition lexikalisch gebunden. Das hat einige Konsequenzen. In Arrow-Funktionen werden strict-Modus-Regeln für den this-Wert ignoriert. Des weiteren wird bei call()- oder apply()-Aufrufen in Kombination mit Arrow-Funktionen der gegebene this-Wert auch ignoriert.

Nun ein paar Beispielen um das Ganze zu veranschaulichen.

Arrow-Funktion mit strict-Modus:

// Traditionelle Funktion
var normal = function() {
  'use strict';
  console.log(this);
}
normal(); // undefined

// Arrow-Funktion
var arrow = () => {
  'use strict';
  console.log(this);
}
arrow(); // window-Objekt

Im Beispiel sehen wir, dass beim normal()-Aufruf der this-Wert undefined ist, da wir 'use strict' nutzen. Beim arrow()-Aufruf wird aber die 'use strict'-Anweisung, für den this-Wert, ignoriert und darum ist this das window-Objekt.

Arrow-Funktion mit call():

var myThisObj = {};

// Traditionelle Funktion
var normal = function() {
  console.log(this);
}
normal.call(myThisObj); // myThisObj

// Arrow-Funktion
var arrow = () => {
  console.log(this);
}
arrow.call(myThisObj); // window-Object (myThisObj wird ignoriert)

Wenn wir normal mit Hilfe von call(myThisObj) aufrufen, ist der this-Wert der Funktion myThisObj. Hingegen ist das bei arrow nicht so, da der this-Wert schon bei der Definition an das window-Objekt gebunden worden ist.

Am besten eignen sich Arrow-Funktionen als Ersatz für anonyme Callback-Funktionen. Ihre Vorteile: kürzere Syntax, und wir müssen uns keine Gedanken über den this-Wert machen. Hierfür ein Beispiel:

var timerArrow = {
  time: 100,
  getTime: function() {
    setTimeout(() => {
      console.log(this.time) // this ist das timer-Objekt
    }, 1000);
  }
};

timerArrow.getTime(); // nach 1 Sekunde wird 100 in der Konsole angezeigt

Zum Schluss zeige ich noch weitere Schreibweisen der Arrow-Funktionen, je nach Anzahl von Funktionsparametern sowie von Anweisungen im Funktionsrumpf. Unten aufgeführt sind Beispiele von Arrow-Funktionen und die entsprechenden traditionellen Funktionen.

Funktion ohne Parameter und nur eine Anweisung im Funktionsrumpf:

() => 21

function() {
  return 21;
}

Funktion mit einem Parameter und mehrere Anweisungen im Funktionsrempf:

(param1) => {
  Anweisung1;
  Anweisung2;
}

function (param1) {
  Anweisung1;
  Anweisung2;
}

ODER

param1 => {
  Anweisung1;
  Anweisung2;
}

function (param1) {
  Anweisung1;
  Anweisung2;
}

Funktion mit mehreren Parametern:

(param1, param2) => 21

function (param1, param2) {
  return 21;
}

Mehr Informationen zur Arrow-Funktionen finden Sie bei Mozilla Developer Network.