Neue Sprachfeatures für JavaScript im ECMAScript-6-Entwurf – Teil 2

Inhaltsverzeichnis

Nicht nur Objektorientierung soll demnächst Teil von ECMAScript werden, auch Sprachergänzungen wie Promises sind geplant und lassen sich schon heute mit Transpilern einsetzen.

Neben den im ersten Teil dieses Artikels vorgestellten Features im Bereich der Objektorientierung gehört die Unterstützung für Arrow-Funktionen und Promises für Callbacks zu den bedeutensten Erleichterungen, die die neue Version des ECMAScript-Standards bringt. Der Transpiler Traceur ermöglicht schon heute, ihn zum programmieren für alle Browser zu nutzen.

Im Browser wird beim Umgang mit dem DOM in der Regel mit Callback-Funktionen gearbeitet. Node.js hat das Prinzip der asynchronen Verarbeitung auf den Server übertragen. Da bei JavaScript mit this nicht das aktuelle Objekt gemeint ist, sondern der aktuelle Scope, ist beim Umgang mit Callbacks in bisherigen JavaScript-Versionen die aktuelle Instanz in einer temporären Variable zu speichern. Dadurch lässt sich im Callback dann auf die Instanz und somit auf die Variable zugreifen:

var badObj = {
     name: "Holger",
      handleMessage: function(msg, callback) {
        callback(msg);
    },
    doIt: function() {
        var that = this;

        this.handleMessage("Hi ", function(msg) {
            console.log(msg + that.name);
        });
    }
};

badObj.doIt();

Eine Lösung sind die mit ECMAScript 6 eingeführten sogenannten Arrow-Funktionen mit der Symbolfolge =>. Sie behalten die lexikalische Bindung von this bei. Dadurch ist es beim Umgang mit Callback-Funktionen nicht mehr notwendig, den Instanz-Kontext von this in einer lokalen Variable zu speichern, um sie dann in der Callback-Funktion verwenden zu können:

var goodObj = {
    name: "Martin",

    handleMessage: function(msg, callback) {
        callback(msg);
    },

    doIt: function() {
        // lange Schreibweise
        this.handleMessage("Guten Tag ", (msg) => {
            console.log(msg + this.name);
        });

        // kurze Schreibweise
        this.handleMessage("Hi ", msg => console.log(msg + this.name));
    }

};

goodObj.doIt();