JavaScript-Objekte


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


In JavaScript sind Objekte König. Wenn Sie Objekte verstehen, verstehen Sie JavaScript.


In JavaScript ist fast „alles“ ein Objekt.

  • Boolesche Werte können Objekte sein (sofern mit dem Schlüsselwort new definiert)

  • Zahlen können Objekte sein (sofern mit dem Schlüsselwort new definiert)

  • Zeichenfolgen können Objekte sein (sofern mit dem Schlüsselwort new definiert)

  • Daten sind immer Objekte

  • Mathematik ist immer ein Gegenstand

  • Reguläre Ausdrücke sind immer Objekte

  • Arrays sind immer Objekte

  • Funktionen sind immer Objekte

  • Objekte sind immer Objekte

Alle JavaScript-Werte mit Ausnahme von Grundelementen sind Objekte.


JavaScript-Primitive

Ein primitiver Wert ist ein Wert, der keine Eigenschaften oder Methoden hat.

3.14 ist ein primitiver Wert

Ein primitiver Datentyp sind Daten, die einen primitiven Wert haben.

JavaScript definiert 7 Arten primitiver Datentypen:

Beispiele

  • string
  • number
  • boolean
  • null
  • undefined
  • symbol
  • bigint

Unveränderlich

Primitive Werte sind unveränderlich (sie sind fest codiert und können nicht geändert werden).

Wenn x=3,14, können Sie den Wert von x ändern, aber Sie können den Wert von 3,14 nicht ändern.

ValueTypeComment
"Hello"string"Hello" is always "Hello"
3.14number3.14 is always 3.14
truebooleantrue is always true
falsebooleanfalse is always false
nullnull (object)null is always null
undefinedundefinedundefined is always undefined

Objekte sind Variablen

JavaScript-Variablen können einzelne Werte enthalten:

Beispiel

let person = "John Doe";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let person = "John Doe";
document.getElementById("demo").innerHTML = person;
</script>

</body>
</html>

JavaScript-Variablen können auch viele Werte enthalten.

Auch Objekte sind Variablen. Aber Objekte können viele enthalten Werte.

Objektwerte werden als Name : Wert-Paare geschrieben (Name und Wert durch a getrennt). Doppelpunkt).

Beispiel

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

<p id="demo"></p>

<script>
let person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>

Ein JavaScript-Objekt ist eine Sammlung benannter Werte

Es ist üblich, Objekte mit dem Schlüsselwort const zu deklarieren.

Beispiel

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating an object:</p>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName;
</script>

</body>
</html>


Objekteigenschaften

Die benannten Werte in JavaScript-Objekten werden als Eigenschaften bezeichnet.

firstName

John

lastName

Damhirschkuh

age

50

eyeColor

Blau

Als Name-Wert-Paare geschriebene Objekte ähneln:

  • Assoziative Arrays in PHP

  • Wörterbücher in Python

  • Hash-Tabellen in C

  • Hash-Maps in Java

  • Hashes in Ruby und Perl


Objektmethoden

Methoden sind Aktionen, die an Objekten ausgeführt werden können.

Objekteigenschaften können sowohl Grundwerte als auch andere Objekte und Funktionen sein.

Eine Objektmethode ist eine Objekteigenschaft, die eine Funktion enthält Definition.

firstName

John

lastName

Damhirschkuh

age

50

eyeColor

Blau

fullName

function() {return this.firstName + " " + this.lastName;}

JavaScript-Objekte sind Container für benannte Werte, sogenannte Eigenschaften und Methoden.

Mehr über Methoden erfahren Sie in den nächsten Kapiteln.


Erstellen eines JavaScript-Objekts

Mit JavaScript können Sie Ihre eigenen Objekte definieren und erstellen.

Es gibt verschiedene Möglichkeiten, neue Objekte zu erstellen:

  • Erstellen Sie ein einzelnes Objekt mit einem Objektliteral.

  • Erstellen Sie ein einzelnes Objekt mit dem Schlüsselwort new.

  • Definieren Sie einen Objektkonstruktor und erstellen Sie dann Objekte des konstruierten Typs.

  • Erstellen Sie ein Objekt mit Object.create().


Verwenden eines Objektliterals

Dies ist der einfachste Weg, ein JavaScript-Objekt zu erstellen.

Mit einem Objektliteral definieren und erstellen Sie gleichzeitig ein Objekt Stellungnahme.

Ein Objektliteral ist eine Liste von Name:Wert-Paaren (z. B. Alter:50) in geschweiften Klammern {}.

Das folgende Beispiel erstellt ein neues JavaScript-Objekt mit vier Eigenschaften:

Beispiel

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {firstName:"John", lastName:"Doe", age:50,eyeColor:"blue"};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Leerzeichen und Zeilenumbrüche sind nicht wichtig. Eine Objektdefinition kann sich über mehrere Zeilen erstrecken:

Beispiel

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

In diesem Beispiel wird ein leeres JavaScript-Objekt erstellt. und fügt dann 4 Eigenschaften hinzu:

Beispiel

const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = {};
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Verwendung des JavaScript-Schlüsselworts new

Im folgenden Beispiel wird ein neues JavaScript-Objekt erstellt mit new Object(), und fügt dann 4 Eigenschaften hinzu:

Beispiel

const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue";

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>

<p id="demo"></p>

<script>
const person = new Object();
person.firstName = "John";
person.lastName = "Doe";
person.age = 50;
person.eyeColor = "blue"; 

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Die obigen Beispiele machen genau das Gleiche.

Es besteht jedoch keine Notwendigkeit, new Object() zu verwenden.

Verwenden Sie aus Gründen der Lesbarkeit, Einfachheit und Ausführungsgeschwindigkeit die Objektliteralmethode.


JavaScript-Objekte sind veränderbar

Objekte sind veränderlich: Sie werden durch Referenz und nicht durch Wert angesprochen.

Wenn person ein Objekt ist, erstellt die folgende Anweisung keine Kopie von person:

const x = person;  // Will not create a copy of person.

Das Objekt x ist keine Kopie einer Person. Es ist Person. Sowohl x als auch Person sind dasselbe Objekt.

Jede Änderung an x verändert auch die Person, da x und Person dasselbe Objekt sind.

Beispiel

const person = {
  firstName:"John",
  lastName:"Doe",
  age:50, eyeColor:"blue"
}
 
const x = person;
x.age = 10;      // Will change both x.age and person.age

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>JavaScript objects are mutable.</p>
<p>Any changes to a copy of an object will also change the original object:</p>

<p id="demo"></p>

<script>
const person = {
  firstName: "John",
  lastName: "Doe",
  age:50,
  eyeColor: "blue"
};

const x = person;
x.age = 10;

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>