JavaScript -Objektkonstruktoren
Beispiel
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
Es gilt als bewährte Vorgehensweise, Konstruktorfunktionen mit einem großen Anfangsbuchstaben zu benennen.
Objekttypen (Blueprints) (Klassen)
Die Beispiele aus den vorherigen Kapiteln sind begrenzt. Sie erstellen nur einzelne Objekte.
Manchmal brauchen wir einen " Bauplan ", um viele Objekte des gleichen "Typs" zu erstellen.
Die Möglichkeit, einen "Objekttyp" zu erstellen, besteht darin, eine Objektkonstruktorfunktion zu verwenden .
Im obigen Beispiel function Person()ist eine Objektkonstruktorfunktion.
Objekte des gleichen Typs werden durch Aufrufen der Konstruktorfunktion mit dem newSchlüsselwort erstellt:
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");
Das Schlüsselwort this
In JavaScript ist das aufgerufene thisObjekt das Objekt, das den Code „besitzt“.
Der Wert von this, wenn es in einem Objekt verwendet wird, ist das Objekt selbst.
In einer Konstruktorfunktion thishat keinen Wert. Es ist ein Ersatz für das neue Objekt. Der Wert von thiswird zum neuen Objekt, wenn ein neues Objekt erstellt wird.
Beachten Sie, dass thisdies keine Variable ist. Es ist ein Schlüsselwort. Sie können den Wert von nicht ändern this.
Hinzufügen einer Eigenschaft zu einem Objekt
Das Hinzufügen einer neuen Eigenschaft zu einem vorhandenen Objekt ist einfach:
Beispiel
myFather.nationality = "English";
Die Eigenschaft wird zu myFather hinzugefügt. Nicht zu meiner Mutter. (Keine anderen Personenobjekte).
Hinzufügen einer Methode zu einem Objekt
Das Hinzufügen einer neuen Methode zu einem vorhandenen Objekt ist einfach:
Beispiel
myFather.name = function () {
return this.firstName + " " + this.lastName;
};
Die Methode wird myFather hinzugefügt. Nicht zu meiner Mutter. (Keine anderen Personenobjekte).
Hinzufügen einer Eigenschaft zu einem Konstruktor
Sie können einem Objektkonstruktor keine neue Eigenschaft auf die gleiche Weise hinzufügen, wie Sie einem vorhandenen Objekt eine neue Eigenschaft hinzufügen:
Beispiel
Person.nationality = "English";
Um einem Konstruktor eine neue Eigenschaft hinzuzufügen, müssen Sie sie der Konstruktorfunktion hinzufügen:
Beispiel
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.nationality = "English";
}
Auf diese Weise können Objekteigenschaften Standardwerte haben.
Hinzufügen einer Methode zu einem Konstruktor
Ihre Konstruktorfunktion kann auch Methoden definieren:
Beispiel
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
this.name = function() {
return this.firstName + " " + this.lastName;
};
}
Sie können einem Objektkonstruktor keine neue Methode auf die gleiche Weise hinzufügen, wie Sie einem vorhandenen Objekt eine neue Methode hinzufügen.
Das Hinzufügen von Methoden zu einem Objektkonstruktor muss innerhalb der Konstruktorfunktion erfolgen:
Beispiel
function Person(firstName, lastName, age, eyeColor) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.eyeColor = eyeColor;
this.changeName = function (name) {
this.lastName = name;
};
}Die Funktion changeName() weist der Eigenschaft lastName der Person den Wert name zu.
Jetzt können Sie versuchen:
myMother.changeName("Doe");
JavaScript weiß, von welcher Person Sie sprechen, indem es dies durch myMother "ersetzt" .
Eingebaute JavaScript-Konstruktoren
JavaScript hat eingebaute Konstruktoren für native Objekte:
new String() // A new String object
new Number() // A new Number object
new Boolean() // A new Boolean object
new Object() // A new Object object
new Array() // A new Array object
new RegExp() // A new RegExp object
new Function() // A new Function object
new Date() // A new Date object
Das Math()Objekt ist nicht in der Liste. Mathist ein globales Objekt. Das newSchlüsselwort kann nicht für verwendet werden
Math.
Wussten Sie?
Wie Sie oben sehen können, hat JavaScript Objektversionen der primitiven Datentypen String, Numberund Boolean. Aber es gibt keinen Grund, komplexe Objekte zu erstellen. Primitive Werte sind viel schneller:
Verwenden Sie Zeichenfolgenliterale ""anstelle von new String().
Verwenden Sie Zahlenliterale 50anstelle von new Number().
Verwenden Sie boolesche Literale true / falseanstelle von new Boolean().
Verwenden Sie Objektliterale {}anstelle von new Object().
Verwenden Sie Array-Literale []anstelle von new Array().
Verwenden Sie Musterliterale /()/anstelle von new RegExp().
Verwenden Sie Funktionsausdrücke () {}anstelle von new Function().
Beispiel
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new Object object
const x5 = []; // new Array object
const x6 = /()/ // new RegExp object
const x7 = function(){}; // new function
String-Objekte
Normalerweise werden Strings als Primitive erstellt: firstName = "John"
Strings können aber auch als Objekte mit dem newSchlüsselwort erstellt werden:
firstName = new String("John")
Warum Strings nicht als Objekt angelegt werden sollten, erfahren Sie im Kapitel JS Strings .
Zahlenobjekte
Normalerweise werden Zahlen als Primitive erstellt: x = 30
Zahlen können aber auch als Objekte mit dem newSchlüsselwort erstellt werden:
x = new
Number(30)
Warum Zahlen nicht als Objekt erstellt werden sollten, erfahren Sie im Kapitel JS Numbers .
Boolesche Objekte
Normalerweise werden boolesche Werte als Primitive erstellt: x =
false
Aber Booleans können auch als Objekte mit dem newSchlüsselwort erstellt werden:
x = new Boolean(false)
Warum Booleans nicht als Objekt erstellt werden sollten, erfahren Sie im Kapitel JS Booleans .