201211Dez

JavaScript: Mixins mit ECMAScript 5 verwenden

Mit dem Einsatz von Mixins in JavaScript lassen sich Eigenschaften und Methoden eines Objekts auf ein Anderes übertragen. Dies wird in der Regel durch eine klassische "extend"- oder "augment"-Funktion erreicht, welche die Attribute eines Quell-Objekts per "hasOwnProperty()" überprüft und anschließend auf das Ziel-Objekt kopiert.
Wer bei einer WebApp ECMAScript 5 und die damit verbundenen Getter und Setter verwenden kann, könnte auf ein Problem stoßen, das in diesem Artikel beschrieben wird.

NCZOnline - Are your mixins ECMAScript 5 compatible

So muss darauf geachtet werden, dass die Funktion, die Mixins erlaubt, auch die lokalen Getter und Setter berücksichtigt. Das Problem liegt daher im Scoping, da innerhalb des Ziel-Objekts eines Mixins ein eigenes Scope mit lokalen Variablen vorliegt. Eine Mixin-Funktion für ECMAScript 5 kann also so aussehen:

  • function mixin(receiver, supplier) {
  • Object.keys(supplier).forEach(function(value, property) {
  • Object.defineProperty(receiver, property, Object.getOwnPropertyDescriptor(supplier, property));
  • });
  • }

Eine Variante, die ein Fallback für ECMAScript 3 enthält, findet sich ebenfalls in dem Artikel.