Willkommen zu einem neuen Eintrag – Diese Woche geht es um Javascript Objekte und wie wir diese mit eigenen Methoden erweitern können – Stichwort Objekt Prototyp. Dabei ist es relativ egal ob es sich um native oder eigene Objekte handelt.

Was sind native Javascript Objekte?

Zu den nativen Javascript Objekten zählen folgende:

• Number
  Wird für sämtliche Zahlen verwendet und bringt einige nützliche Attribute mit. Unter anderem zum herausfinden der größten und kleinsten darstellbaren Zahl.
• Boolean
  Wird verwendet für „Wahr“ und „Falsch“ angaben (true / false).
• String
  Wird für sämtliche Strings verwendet. Bringt das „length“ Attribut mit und diverse Methoden zur verarbeitung (replace, slice, split, substr, …) mit. Liefert außerdem einige HTML Wrapper Methoden wie z.B. bold, italics, strike und viele weitere.
• Array
  Wird für Arrays verwendet und bringt viele interessante Methoden mit! Einige davon kennen wir schon von anderen Sprachen wie PHP (map, push, pop, shift, …)
• Date
  Wird für diverse Datums- und Zeitangaben verwendet.
• Math
  Wird für diverse Berechnungen verwendet und bringt außerdem einige Attribute mit, wie z.B. PI. Interessanter (und bekannter) dürften jedoch die Methoden sein, wie etwa min, max, pow, sqrt und random (um nur einige zu nennen)
• RegExp
  Wird für reguläre Ausdrücke verwendet.

Was bringt uns die erweiterung?

Die erweiterung von Objekten kann uns in vielerlei Hinsicht helfen – Nehmen wir beispielsweise Javascript Frameworks wie Prototype und MooTools… Diese erweitern die nativen Objekte um viele nützliche Methoden! Ein gutes Beispiel hierfür wäre sicherlich die „foreach“ Alternative „each“.

Prototype prüft ob die native Methode „forEach“ verfügbar ist und verwendet diese wenn möglich:

// Removed some lines from the original Prototype code from github.
var arrayProto = Array.prototype,
    _each = arrayProto.forEach; // use native browser JS 1.6 implementation if available

function each(iterator, context) {
    for (var i = 0, length = this.length >>> 0; i < length; i++) {
        if (i in this) iterator.call(context, this[i], i, this);
    }
}
if (!_each) _each = each;

// ...

Object.extend(arrayProto, {
    _each: _each,
    // ...
});

MooTools Quelltext sieht etwas anders aus, macht im Grunde aber das gleiche 🙂

Das erweitern bringt uns ganz einfach neue Funktionen, die vom nativen Javascript nicht mitgeliefert werden. Schaut euch einfach mal die Dokumentation von Prototype und MooTools an!

Praktisches Beispiel "trim"

Wir möchten das String Objekt um eine "trim()" Methode erweitern (ähnlich wie wir es von PHP kennen).

String.prototype.trim = function(){
    return String(this).replace(/^\s+|\s+$/g, '');
};

Wir fügen also dem String Prototypen eine neue Methode namens "trim" an. Innerhalb dieser Methode können wir mit this auf den String selbst zugreifen, diesen zu einem String Objekt casten um Fehler zu umgehen und anschließend mit Hilfe eines regulären Ausdrucks die Leerzeichen am Anfang und Ende entfernen:

" dies ist ein Test   ".trim();
// "dies ist ein Test"

Praktisches Beispiel "repeat"

Dieses mal nehmen wir uns "str_repeat()" und erweitern unser "String" Objekt mit der Methode "repeat" (abgeschaut bei Prototype):

String.prototype.repeat = function (count) {
    return count < 1 ? '' : new Array(count + 1).join(this);
};

"test".repeat(5);
// "testtesttesttesttest"

Praktisches Beispiel "isPrime"

Anschließend ein Beispiel aus dem Bereich der Zahlen... Wir möchten eine Methode entwickeln, die uns sagt ob es sich bei der aktuellen Zahl um eine Primzahl handelt:

Number.prototype.isPrime = function () {
    var start = 2,
        num = this;
    while (start <= Math.sqrt(num)) {
        if (num % start++ < 1) return false;
    }
    return num > 1;
};

1 .isPrime();
// false

2 .isPrime();
// true

[1,2,3,4,5,6,7,8,9,10].filter(isPrime);
// [2, 3, 5, 7]

Erweitern ist okay, überschreiben nicht!

Es ist vollkommen in Ordnung die nativen Objekte mit eigenen Methoden zu erweitern - Aber hütet euch davor vorhandene Methoden (oder Attribute) zu überschreiben! Zum Glück werden einige als nicht schreibbar definiert, doch wir sollten am besten gar nicht erst in die Versuchung kommen 😉

// The "PI" constant can not be overwritten.
Math.PI = 2;

Math.PI;
// 3.141592653589793

Object.getOwnPropertyDescriptor(Math, 'PI');
// {value: 3.141592653589793, writable: false, enumerable: false, configurable: false}

Auf das Thema "(native) Javascript Objekte überschreiben" gehe ich nächste Woche ein... Soviel vorab: Man kann sich sehr schnell vieles kaputt machen, grade wenn man mit Frameworks arbeitet die bestimmte Methoden exzessiv nutzen!

Und damit verabschiede ich mich auch schon für diese Woche! Ich hoffe ich konnte euch was interessantes neues zeigen und darf euch auch nächste Woche wieder hier begrüßen! Bis dahin wünsche ich einen schönen dritten Advent und natürlich Happy Coding!