Auf der Seite von w3schools.com habe ich einen interessanten Satz gefunden:
Wer JavaScript-Objekte verstanden hat, hat das Programm verstanden!
JavaScript ist im Prinzip eine Erweiterung von HTML. Das erkennt man vor allem an den JavaScript-Objekten, die zur Verfügung stehen. Diese bestehen aus Eigenschaften und Methoden, wobei Methoden wiederum selbst ebenfalls spezielle Formen von Objekten sind.
Beim Erzeugen eines neuen Objekts werden zuerst Eigenschaften und Methoden erzeugt (deklariert). JavaScript kann dann auf diese Eigenschaften und Methoden zugreifen. Ein neues Objekt kann auf unterschiedlichen Arten erzeugt werden:
Verwenden sie die Browser-Konsole um JavaScript Code auf dieser Seite zu testen.
Das ist der einfachste Weg um ein Objekt zu erzeugen. Eigenschaften der Objektvariablen werden als Name:Wert -Paar definiert, getrennt mit einem Komma. Eingeschlossen wird die Anweisung in einem geschweiften Klammernpaar (Anweisungsblock). Die Anweisung kann in einer Zeile stehen oder auch mehrzeilig sein.
Objekte sind auch Variablen, nur können einer Objektvariablen mehrere Werte zugewiesen werden, diese Werte werden zu Eigenschaften. PHP-Programmierer wird diese Syntax an ein assoziatives Array erinnern und kann auch so verstanden werden.
let person = { firstName:"Adi", lastName:"Prinz", age:60 };
Objekt-Eigenschaften können auch außerhalb der Deklaration geschrieben werden, auch hier gibt es mehrere Schreibarten:
let person = { firstName:"Adi", lastName:"Prinz", age:60 };
person.gender = "männlich";
// Oder so:
// person["gender"] = "männlich";
// Oder so:
// let x = "gender";
// person[x] = "männlich";
person.gender;
Der Zugriff auf eine Objekteigenschaft wird mit dem Objektnamen, einem Punkt und der Eigenschaft geschrieben. Es existiert auch eine alternative Schreibweise mit eckigen Klammern und Anführungszeichen ["Eigenschaft"].
person.firstName; // Alternative Schreibweise person["firstName"];
Methoden werden als Funktion im Objekt definiert. Methoden führen eine Aktion aus sind aber an ein Objekt gebunden.
let person = {
firstName:"Adi",
lastName:"Prinz",
age:60,
fullName:function() {
return this.firstName + " " + this.lastName;
}
};
Der Zugriff auf eine Objektmethode wird mit dem Objektnamen, einem Punkt und dem Namen geschrieben, am Schluss kommt noch der Funktionsparameter.
person.fullName();
Innerhalb der Methoden-Deklaration werden die Eigenschaften des Objekts mit dem Schlüsselwort this angesprochen.
this verweist auf die aktuelle Instanz (das ist in diesem Fall das Objekt person .
In diesem Beispiel ist this.firstName äquivalent zu person.firstName .
Damit kann man auch Methoden jederzeit hinzufügen:
let person = {
firstName:"Adi",
lastName:"Prinz",
age:60,
fullName:function() {
return this.firstName + " " + this.lastName;
}
};
person.ausgabe = function() {
return "Mein Name ist " + this.firstName + " " + this.lastName +
" und ich bin " + this.age + " Jahre alt!";
}
person.ausgabe();
Mit dem delete -Operatot können Eigenschaften entfernt werden.
let person = {
firstName:"Adi",
lastName:"Prinz",
age:60,
fullName:function() {
return this.firstName + " " + this.lastName;
}
};
delete person.age;
person.age;
Dieses Beispiel liefert undefined , denn age existiert nicht mehr.
Dasselbe Objekt kann auch mit dem Schlüsselwort new geschrieben werden. Es macht keinen Unterschied wie sie so ein Objekt als Literal oder mit dem Konstruktor new erzeugen.
let person = new Object();
person.firstName = "Adi";
person.lastName = "Prinz";
person.age = 60;
person.fullName = function() {
return this.firstName + " " + this.lastName;
}
person.fullName();
JavaScript kann als objektorientierte Sprache bezeichnet werden, es existieren allerdings keine Klassen, stattdessen wird mit Funktionsobjekten und prototypischen Objekten gearbeitet. In prototypbasierten Sprachen (wie JavaScript) existieren nur Objekte, von denen wiederum spezielle, bereits vorhandene Objekte als Vorlage für andere Objekte dienen. Damit stellen diese so genannten Prototyp-Objekte ihre Eigenschaften und Methoden zur Wiederverwendung zur Verfügung, wobei die neu erzeugten Objekte nur die Unterschiede zu ihren Prototyp-Objekten definieren müssen. Der Konstruktor selber ist eine Einfache JavaScript-Funktion.
Die bisher vorgestellten Objekte können nur ein einzelnes Objekt erzeugen. Aus einem Objekt, welches mit einem, Konstruktor erstellt wurde (Prototyp), können beliebig viele Instanzen erzeugt werden. Auch hier kommt das Schlüsselwort new zum Einsatz.
Für ein benutzerdefiniertes Objekt wird zuerst eine Funktion erstellt, die Eigenschaften und Methoden definiert.
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function () {
return this.firstName + " " + this.lastName;
}
}
let chef = new Person("Adi", "Prinz", 60);
let chefin = new Person("Gabi", "Prinz", 55);
chef.fullName();
Ein Konstruktor ist nichts anderes als eine Funktion. Diese Funktion wird zum Objekt und besteht wiederum aus Eigenschaften und Methoden. Diese Objekt wird als Prototyp bezeichnet, der Name von Prototypen wird standardmäßig mit einem Großbuchstaben begonnen (Person). Aus diesem Prototypen können nun beliebig viele Instanzen erzeugt werden. Dies geschieht mit dem Schlüsselwort new . Interessant ist eine Abfrage mit dem Operator typeof .
console.log(typeof Person); // liefert function console.log(typeof chef); // liefert object
Innerhalb der Konstruktor-Funktion werden die Elemente des Objekts mit dem Schlüsselwort this angesprochen. this verweist auf die aktuelle Instanz und fügt dem Objekt Eigenschaften hinzu oder modifiziert sie.
Für fortgeschrittene Programmierer sei noch erwähnt, dass JavaScript-Objekte by reference (nicht by value) übergeben werden. Eine Kopie von einer Objektvariable erzeugt kein neues Objekt, sondern eine Referenz auf dasselbe Objekt. Ein Beispiel:
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function () {
return this.firstName + " " + this.lastName;
}
}
let chef = new Person("Adi", "Prinz", 60);
let x = chef;
x.age = 20;
chef.age;
Die Variable x ist kein neues Objekt sondern eine Referenz auf das Objekt chef.
Wie bei Objekt-Literalen können auch Eigenschafte und Methoden der Instanz hinzugefügt bzw. entfernt werden.
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function () {
return this.firstName + " " + this.lastName;
}
}
let chef = new Person("Adi", "Prinz", 60);
chef.nationalitaet = "Österreich";
chef.ausgabe = function() {
return "Mein Name ist " + this.firstName + " " +
this.lastName + " und meine Staatsangehörigkeit ist " + this.nationalitaet;
}
chef.ausgabe();
Aber Achtung: Die Änderungen in diesem Beispiel sind nur für die Instanz (chef) gültig. Der Prototyp ist davon nicht betroffen.
Mit der prototype -Eigenschaft kann man auch Eigenschaften und Methoden im Prototypen bearbeiten.
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.fullName = function () {
return this.firstName + " " + this.lastName;
}
}
Person.prototype.nationalitaet = "Österreich";
Person.prototype.ausgabe = function() {
return "Mein Name ist " + this.firstName + " " +
this.lastName + " und meine Staatsangehörigkeit ist " + this.nationalitaet;
}
let chef = new Person("Adi", "Prinz", 60);
let chefin = new Person("Gabi", "Prinz", 55);
console.log(chef.ausgabe());
console.log(chefin.ausgabe());
Objekte können auch unter Verwendung der Object.create() Methode erzeugt werden. Diese Methode kann einen Objekt-Prototypen ohne Konstruktor erstellen. In diesem Beispiel wird ein Objekt-Literal person erstellt. In diesem Objekt können Eigenschaften mit Standardwerten definiert sein, die später mit neuen Werten überschrieben werden. let chef = Object.create(person) erzeugt dann eine Instanz von person.
let person = {
firstName:"Vorname",
lastName:"Nachname",
age:60,
fullName:function() {
return this.firstName + " " + this.lastName;
}
};
let chef = Object.create(person);
chef.firstName = "Adi";
chef.lastName = "Prinz";
let chefin = Object.create(person);
chefin.firstName = "Gabi";
chefin.lastName = "Prinz";
console.log(chef.fullName());
console.log(chefin.fullName());