JavaScript mit Adi Prinz

Ein Objekt erzeugen

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:

• Als Object Literal
• Als Object mit dem Schlüsselwort new
• Mit einer Funktion als Objekt-Konstruktor
• Mit der Methode Object.create()

Verwenden sie die Browser-Konsole um JavaScript Code auf dieser Seite zu testen.

Ein einfachs Objektbeispiel

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.

var person = { firstName:"Adi", lastName:"Prinz", age:60 };

Eigenschaften nachträglich anfügen

Objekt-Eigenschaften können auch außerhalb der Deklaration geschrieben werden, auch hier gibt es mehrere Schreibarten:

var person = { firstName:"Adi", lastName:"Prinz", age:60 };
person.gender = "männlich";

//  Oder so:
//  person["gender"] = "männlich";
  
//  Oder so:
//  var 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.

var 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();

Die Sache mit dem this

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:

var 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();

Eigenschaften entfernen mit delete

Mit dem delete -Operatot können Eigenschaften entfernt werden.

var 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.

Ein Objekt erzeugen

var person = new Object();
  person.firstName = "Adi";
  person.lastName = "Prinz";
  person.age = 60;
  person.fullName = function() {
    return this.firstName + " " + this.lastName;
  }
  
person.fullName();

Der Konstruktor

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;
    }
}
var chef = new Person("Adi", "Prinz", 60);
var 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

Das Schlüsselwort this

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.

by reference

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;
    }
}
var chef = new Person("Adi", "Prinz", 60);

var x = chef;
x.age = 20;
chef.age;

Die Variable x ist kein neues Objekt sondern eine Referenz auf das Objekt chef.

Eigenschaften und Methoden der Instanz bearbeiten

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;
    }
}

var 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.

Eigenschaften und Methoden des Prototypen bearbeiten

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;
}

var chef = new Person("Adi", "Prinz", 60);
var chefin = new Person("Gabi", "Prinz", 55);

console.log(chef.ausgabe());
console.log(chefin.ausgabe());

Beispiel

var person = {
firstName:"Vorname",
lastName:"Nachname",
age:60,
fullName:function() {
  return this.firstName + " " + this.lastName;
}
};

var chef = Object.create(person);
chef.firstName = "Adi";
chef.lastName = "Prinz";

var chefin = Object.create(person);
chefin.firstName = "Gabi";
chefin.lastName = "Prinz";

console.log(chef.fullName());
console.log(chefin.fullName());