Im wirklichen Leben ist ein Auto ein Objekt.
Ein Auto hat Eigenschaften wie Gewicht und Farbe und Methoden wie Start und Stopp:
Object | Properties | Methods |
---|---|---|
![]() |
car.name = Fiat car.model = 500 car.weight = 850kg car.color = white |
car.start() car.drive() car.brake() car.stop() |
Alle Autos haben die gleichen Eigenschaften, aber die Eigenschaftswerte unterscheiden sich von Auto zu Auto.
Alle Autos haben die gleichen Methoden, aber die Methoden werden ausgeführt zu unterschiedlichen Zeiten.
Sie haben bereits gelernt, dass JavaScript-Variablen vorhanden sind Container für Datenwerte.
Dieser Code weist einen einfachen Wert (Fiat) zu eine Variable namens car:
let car = "Fiat";
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p id="demo"></p>
<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>
Auch Objekte sind Variablen. Aber Objekte können viele enthalten Werte.
Dieser Code weist a viele Werte (Fiat, 500, weiß) zu Variable benanntes Auto:
const car = {type:"Fiat", model:"500", color:"white"};
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>
</body>
</html>
Die Werte werden als Name:Wert-Paare geschrieben (Name und Wert durch ein getrennt). Doppelpunkt).
Es ist üblich, Objekte mit dem Schlüsselwort const zu deklarieren.
Erfahren Sie mehr über die Verwendung von const mit Objekten im Kapitel: JS Const.
Sie definieren (und erstellen) ein JavaScript-Objekt mit einem Objektliteral:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Display some data from the object:
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 id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Die Name:Werte-Paare in JavaScript-Objekten werden als Eigenschaften bezeichnet:
John
Damhirschkuh
50
Blau
Sie können auf zwei Arten auf Objekteigenschaften zugreifen:
objectName.propertyName
oder
objectName["propertyName"]
person.lastName;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>There are two different ways to access an object property.</p>
<p>You can use person.property or person["property"].</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
person["lastName"];
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>There are two different ways to access an object property.</p>
<p>You can use person.property or person["property"].</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
JavaScript-Objekte sind Container für benannte Werte, sogenannte Eigenschaften.
Objekte können auch Methoden haben.
Methoden sind Aktionen, die an Objekten ausgeführt werden können.
Methoden werden in Eigenschaften als Funktion gespeichert Definitionen.
John
Damhirschkuh
50
Blau
function() {return this.firstName + " " + this.lastName;}
Eine Methode ist eine als Eigenschaft gespeicherte Funktion.
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Im obigen Beispiel bezieht sich this
auf das Person-Objekt.
I.E. this.firstName bezeichnet die Eigenschaft firstName von this.
I.E. this.firstName bezeichnet die Eigenschaft firstName von person.
In JavaScript bezieht sich das Schlüsselwort this
auf ein Objekt.
Welches Objekt hängt davon ab, wie dies
aufgerufen (verwendet oder aufgerufen) wird?
Das Schlüsselwort this
bezieht sich je nach Verwendung auf unterschiedliche Objekte:
In einer Objektmethode bezieht sich this
auf das Objekt.
Allein dies
bezieht sich auf das globale Objekt.
In einer Funktion bezieht sich this
auf das globale Objekt.
In einer Funktion ist im strikten Modus dies
undefiniert
.
In einem Ereignis bezieht sich this
auf das Element, das das Ereignis empfangen hat.
Methoden wie call()
, apply()
und bind()
kann dies
auf jedes Objekt verweisen.
dies
ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this
nicht ändern.
Das JavaScript dieses Tutorial
In einer Funktionsdefinition bezieht sich this
auf den „Eigentümer“ der Funktion.
Im obigen Beispiel ist this
das Personenobjekt, dem das Objekt „gehört“. fullName
-Funktion.
Mit anderen Worten bedeutet this.firstName
die firstName
-Eigenschaft dieses Objekts.
Erfahren Sie mehr über dies
im JavaScript dieses Tutorials.
Sie greifen auf eine Objektmethode mit der folgenden Syntax zu:
objectName.methodName()
name = person.fullName();
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
id: 5566,
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
Wenn Sie auf eine Methode ohne die()-Klammern zugreifen, ist dies der Fall gibt die Funktionsdefinition zurück:
name = person.fullName;
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>If you access an object method without (), it will return the function definition:</p>
<p id="demo"></p>
<script>
// Create an object:
const person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
Wenn eine JavaScript-Variable mit dem Schlüsselwort „new
“ deklariert wird, ist die Variable erstellt als ein Objekt:
x = new String(); // Declares x as a String object
y = new Number(); // Declares y as a Number object
z = new Boolean(); // Declares z as a Boolean object
Vermeiden Sie String
-, Number
- und Boolean
-Objekte . Sie verkomplizieren Ihren Code und verlangsamen ihn Ausführungsgeschwindigkeit.
Später in diesem Tutorial erfahren Sie mehr über Objekte.