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.
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:
string
number
boolean
null
undefined
symbol
bigint
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.
Value | Type | Comment |
---|---|---|
"Hello" | string | "Hello" is always "Hello" |
3.14 | number | 3.14 is always 3.14 |
true | boolean | true is always true |
false | boolean | false is always false |
null | null (object) | null is always null |
undefined | undefined | undefined is always undefined |
JavaScript-Variablen können einzelne Werte enthalten:
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).
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.
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>
Die benannten Werte in JavaScript-Objekten werden als Eigenschaften bezeichnet.
John
Damhirschkuh
50
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
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.
John
Damhirschkuh
50
Blau
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.
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()
.
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:
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:
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:
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>
Im folgenden Beispiel wird ein neues JavaScript-Objekt erstellt mit new Object()
, und fügt dann 4 Eigenschaften hinzu:
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.
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.
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>