JavaScript-Objekte


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Objekte, Eigenschaften und Methoden des realen Lebens

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.


JavaScript-Objekte

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.



Objektdefinition

Sie definieren (und erstellen) ein JavaScript-Objekt mit einem Objektliteral:

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 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:

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

Objekteigenschaften

Die Name:Werte-Paare in JavaScript-Objekten werden als Eigenschaften bezeichnet:

firstName

John

lastName

Damhirschkuh

age

50

eyeColor

Blau


Zugreifen auf Objekteigenschaften

Sie können auf zwei Arten auf Objekteigenschaften zugreifen:

objectName.propertyName

oder

objectName["propertyName"]

Beispiel 1

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>


Beispiel2

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.


Objektmethoden

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.

firstName

John

lastName

Damhirschkuh

age

50

eyeColor

Blau

fullName

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

Eine Methode ist eine als Eigenschaft gespeicherte Funktion.


Beispiel

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.


Was ist das?

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.

Notiz

dies ist keine Variable. Es ist ein Schlüsselwort. Sie können den Wert von this nicht ändern.

Siehe auch:

Das JavaScript dieses Tutorial


Das Schlüsselwort dies

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.


Auf Objektmethoden zugreifen

Sie greifen auf eine Objektmethode mit der folgenden Syntax zu:

objectName.methodName()

Beispiel

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:

Beispiel

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>

Deklarieren Sie keine Zeichenfolgen, Zahlen und booleschen Werte als Objekte!

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.