1unitedpower: Default-Parameter

Beitrag lesen

var Constructor = function (val) {
  this.property = 'value';
  if (val) {
    this.property = val;
  }

Angenommen this.property hätte true als Default-Wert und du möchtest ihn per Konstruktor-Parameter mit false überschreiben, dann geht das nicht, weil deine Bedingung if (val) nie wahr wird. Mit if (val !== undefined) kann man auch diesen Fall abdecken.

EcmaScript2015 bringt eine eigene Syntax für Default-Parameter mit:

var Constructor = function (val='value') {
   this.value = val;
}

Und es ist auch besser, sich nicht mit 10 oder 20 Wiederholungen einen abzubrechen, sondern stattdessen über ein Array mit den erlaubten Eigenschaftennamen zu iterieren. Damit tritt auch das truthy/falsy-Problem nicht auf.

var Constructor = function (object) {
  this.first = 1;
  this.second = 2;

  if (typeof object == 'object') {
    ['first', 'second'].forEach(function(name) {
      if (object.hasOwnProperty(name)) {
        this[name] = object[name];
      }
    });
  }
};

Ein ähnliches Ergebnis erreicht man mit Object.assign(), allerdings werden dann sämtliche Eigenschaften aus dem Parameter-Objekt übernommen, nicht nur solche, die explizit angegeben wurden.

var Constructor = function (parameter) {
  this.first = 1;
  this.second = 2;

  Object.assign(this,parameter);
};

Noch eleganter finde ich es, die Default-Parameter in ein eigenes Objekt auszulagern:

var Constructor = function (parameter) {
  const defaults = {
     first : 1,
     second : 2
  };
  Object.assign(this,defaults,parameter);
};

Mit Destructuring ergibt sich auch die Möglichkeit benannte Default-Parameter in der Signatur zu notieren:

var Constructor = function ({first = 1, second = 2}) {
    Object.assign(this,arguments[0]);
}

Beim Aufruf muss dann allerdings ein Objekt übergeben werden und das funktioniert wider Kompatibilitätstabelle leider nicht mit Babel (oder ist das mein Fehler?), dafür kann man sich einen Workaround basteln:

var Constructor = function ({first= 1, second= 2}) {
    Object.assign(this,{first,second});
}

Was auch wieder dedlfix' Lösung mit dem expliziten Listing der Parameter näher kommt. http://jsfiddle.net/pak3wddj/

Hintergrundwissen gibt Dr. Axel Rauschmayer in seinem Blog: http://www.2ality.com/2015/01/es6-destructuring.html