Javascript Objekte • Methoden und Eigenschaften

Javascript Methoden: Funktionen von Objekten

Methoden sehen aus wie Funktionen, haben Klammern wie Funktionen und werden in Javascript auch tatsächlich als Funktionen innerhalb eines Objekts realisiert.

Anders als bei Unterfunktionen in Standard-Funktionen, die außerhalb der Funktion nicht sichtbar sind, kann auf die Methoden eines Javascript-Objekts außerhalb des Objekts zugegriffen werden – und zwar wie bei den Eigenschaften von Objekten durch die dot-Notation.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Objekt-Methoden

Eine Funktion ist eine Gruppe von Anweisungen, die durch einen Namen aufgerufen werden. Beim Aufruf der Funktion können Daten übergeben werden, um sie innerhalb der Funktion zu bearbeiten. Funktionen können Daten zurückgeben (den return-Wert).

Eine Methode wird über einen Namen aufgerufen, der zu einem Objekt gehört. Ansonsten sind Methoden und Funktionen bis auf zwei Unterschiede identisch:

  • Einer Methode wird indirekt das Objekt übergeben, auf dem sie aufgerufen wird.
  • Eine Methode kann auf Daten operieren, die zum Objekt gehören.
let Person = (function() {
    function Person(name) {
        this.name = name;
    }

    Person.prototype.getName = function() {
        return this.name;
    };

    return Person;
}());

let p = new Person('Peter Schmitz');
console.log('Name Person 1: ' + p.getName());
delete p.name;
console.log('Name Person 1: ' + p.getName() + ' — außerhalb geändert!');
[Log] Name Person 1: Peter Schmitz
[Log] Name Person 1: undefined — außerhalb geändert!

Genauso wie bei Eigenschaften von Objekten, die öffentlich (durch die Notation this.xxx) oder privat (durch das Schlüsselwort var oder let) deklariert sein können, gibt es öffentliche und private Methoden in Objekten.

Dieser Ansatz hat den Vorteil, dass alle Instanzen von Person gleich sind, aber es gibt keine privaten Eigenschaften. D.h. Eigenschaften können durch externen Code geändert und sogar gelöscht werden.

Der Javascript Dot

Eigenschaften (Properties) und Methoden werden durch die dot-Notation angesprochen: Vorn steht das Objekt, gefolgt von einem Punkt gefolgt von einer Methode oder Eigenschaft. So entsteht ein Pfad von einem Objekt zu einer Methode oder einer Eigenschaft, und da Eigenschaften selber wieder Objekte sein können, kann dieser Pfad auch tief werden.

var mitarbeiter = {
   persNr    : 0119601234,
   lastName  : "Meier",
   adress    : {
      ort  : "Neukirchen",
      plz  : 47110
   }
}
alert(mitarbeiter.adress.plz);

Auf die ersten drei Buchstaben von mitarbeiter.adress.ort greift z.B. substring wie folgt zu

var short = mitarbeiter.adress.ort.substring(0,3);

Die dot-Notation ist nur eine Technik, um an eine Eigenschaft oder Methode zu gelangen. Stattdessen könnte auch ein Array benutzt werden, das mit eckigen Klammern und einem Index auf Element zugreift. Diese Anweisungen sind semantisch äquivalent:

Zugriff über die dot-Notation
mitarbeiter.adress.ort
Zugriff über die Array-Notation
mitarbeiter["adress"]["plz"]

Über die Schlüssel eines Objekts kann iteriert werden:

const mitarbeiter = { persNr: 0119601234, lastName: "Meier" }
for (var attr in mitarbeiter) {
   console.log (attr + ' = ' + mitarbeiter[attr]);
}

Für Arrays sollte diese Iteration allerdings niemals benutzt werden – für Arrays gibt es eigene Techniken der Iteration.

Eigenschaft mit Closures verbergen

Closures isolieren Eigenschaften und schützen vor einer externen Änderung.

Muster für private Eigenschaften von Javascript-Objekten
let Person2 = (function () {
	function person (name) {
		this.getName = function () {
			return name;
		}
	}
	return person;
}());

let w = new Person2 ("Emma Watson");
console.log ("Name Person 2: " + w.getName ());
delete w.name;
console.log ("Name Person 2: " + w.getName () + " ist privat");
[Log] Name Person 2: Emma Watson
[Log] Name Person 2: Emma Watson ist privat 

Anders als im Beispiel 1 kann die Eigenschaft name nicht geändert bzw. gelöscht werden. Der Vorteil von Closure-Funktionen ist der echte Schutz, allerdings muss für jede Instanz von Person ein neues Closure erzeugt werden.

Object Prototype

Wenn ein Mitglied eines Objekts gesucht und nicht im Objekt selber gefunden wird, holt ihn JavaScript aus den Prototype-Mitgliedern des Objekt-Konstruktors. Um eine Methode zu einem Objekt hinzuzufügen, das als Konstruktor angelegt wurde, deklariert man eine Funktion zum Prototypen des Konstruktors:

function Simple() {
...
}

Simple.prototype = new Extended();
Simple.prototype.action = function() {};

Eine Methode toString, um den Inhalt des Objekts auszugeben:

function Mitarbeiter(persNr, firstName, lastName) {
   this.persNr    = persNr;
   …
   this.getAge = function() {
      var mydate = new Date();
      return (mydate.getFullYear() - parseInt(this.persNr.substring(2,6)));
   }  
}

Mitarbeiter.prototype.toString = function() {
	return this.persNur + " " + this.firstName + " " + this.getAge();
}

…
alert (Mitarbeiter)

Prototypen stellen eine Form von Vererbung zur Verfügung.

Die Javascript-Objekt-Klasse wird automatisch an jedes Objekt vererbt. Die Methoden der Objekt-Klasse werden von allen Objekten in Javascript unterstützt.

prototype
Stellt einen Basissatz an Funktionalität für ein Objekt zur Verfügung
constructor
Gibt die Funktion an, die ein Objekt erzeugt
propertyIsEnumerable
Stellt fest, ob eine Eigenschaft Teil eines Objekts ist und sich durchnumerieren läßt
isPrototypeOf()
Stellt fest, ob es eine Verbindung zwischen zwei Objekten gibt
hasOwnProperty()
Stellt fest, ob ein Objekt eine benannte Eigenschaft hat
localeString()
Ausgabe in einen String mit der angegebenen locale
toString()
Ein Objekt in einen String ausgeben
valueOf()
Gibt den Wert eines Objekts aus

Die Eigenschaft prototype ist die Basis der Vererbung. Wenn eine Eigenschaft oder Methode eines Objekts gesucht wird und nicht bei der Objekt-Instanz selber gefunden wird, wird beim Prototyp des Objekts gesucht. Da prototype genauso wie alles andere in Javascript ein Objekt ist, hat die Klasse des Prototyps selber einen Prototyp.

Wenn ein Prototyp oder eine Methode in einer Objektinstanz oder ihrem Prototypen nicht gefunden wird, geht Javascript weiter zum Prototyp des Prototypes usw., bis die Objektklasse selber erreicht wird.

Alle Eigenschaften eines Objekts abfragen mit getOwnPropertyNames

var heros = { "name": "Batman", "age" : 33, "city": "Gotham" };
var props = Object.getOwnPropertyNames(heros);
document.querySelector("#herosresult").innerHTML += props;


			

Oder, um etwas näher an die Manipulation von HTML und CSS in Webseiten zu rücken: alle Eigenschaften des String-Objekts abfragen:

const props = Object.getOwnPropertyNames(String.prototype);

gibt ein Array aller Eigenschaften eines Objekts zurück.