Objekte in JavaScript

Ich beginne eine Reihe von Beiträgen über JavaScript-Konzepte, und das ist erst der Anfang. In diesem ersten Beitrag wird das Grundkonzept von Objekten untersucht, das für das Verständnis der Funktionsweise der Datenstruktur in JavaScript unerlässlich ist.

Bleiben Sie gespannt auf die nächsten Beiträge, die diesen Artikel und mehrere andere Themen fortsetzen.

---

Was ist ein Objekt?

In der realen Welt sind Objekte Entitäten (real oder abstrakt). Zum Beispiel: Bleistift, Auto, Notizbuch. Jedes dieser Objekte hat spezifische Eigenschaften. Zum Beispiel: ein blaues Auto, ein roter Stift oder ein großes Notizbuch.

In JavaScript sind Objekte unabhängige Einheiten, die Eigenschaften sammeln. Eigenschaften sind Assoziationen zwischen einem Namen und einem Wert, also Informationen, die das Objekt beschreiben.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

In diesem Beispiel sind Farbe und Größe Eigenschaften des Autoobjekts, und jede von ihnen hat einen zugehörigen Wert.

Objekte erstellen

Literale Syntax

Literale Objekte werden auf einfache und direkte Weise erstellt, wobei die Werte bereits manuell definiert sind. Diese Syntax ist ideal, wenn Sie einen festen Satz von Eigenschaften für das Objekt haben.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

Dieser Objekttyp ist nützlich, wenn sich Eigenschaften nicht oft ändern oder wenn Sie schnell ein Objekt mit festen Werten erstellen müssen.

Konstruktorfunktionen

Konstruktorfunktionen werden zum dynamischen Erstellen von Objekten verwendet, insbesondere wenn Sie mehrere ähnliche Objekte benötigen. Bei Verwendung des Schlüsselworts new wird ein neues Objekt erstellt, das auf die Konstruktorfunktion verweist.

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

Als konventionelleres und weniger akademisches Beispiel:

function Pessoa(nome, idade) {
  this.nome = nome;
  this.idade = idade;

  this.cumprimentar = function () {
    console.log("Olá, meu nome é " + this.nome);
  };
}

const pessoa1 = new Pessoa("João", 30);
const pessoa2 = new Pessoa("Maria", 25);

pessoa1.cumprimentar(); // Olá, meu nome é João
pessoa2.cumprimentar(); // Olá, meu nome é Maria

In diesem Fall wird die Ausgabe mit den Werten „gestempelt“, die von den Variablen person1 und person2 in dem durch die Person-Funktion festgelegten Modell zugewiesen werden.

Verwendung des Wortes Dies

Innerhalb eines Konstruktors verwenden wir das Schlüsselwort this, um auf das zu erstellende Objekt zu verweisen. Dadurch können Sie dynamische Eigenschaften und Methoden für das Objekt definieren.

Im obigen Code definieren beispielsweise this.name und this.age die Eigenschaften des Objekts, und die Greet-Methode ist eine mit dem Objekt verknüpfte Funktion.

Vererbung in Konstruktoren

Die Vererbung in JavaScript funktioniert über Prototypen. Anstatt ein Objekt direkt von einem anderen zu erstellen, erstellen Sie eine Hierarchie, in der ein Objekt Eigenschaften und Methoden von einem anderen erben kann. Dies geschieht mit den Methoden call oder apply.

const carro = {
  cor: "amarelo",
  tamanho: "grande",
};

Wie funktioniert die Vererbung?

Wenn wir Pessoa.call(this, nome) verwenden, rufen wir den Pessoa-Konstruktor auf und übergeben den Kontext des Student-Objekts. Dies führt dazu, dass das Objekt student1 die Namenseigenschaft von Person erbt und außerdem über die Alterseigenschaft verfügt, die exklusiv für die Student-Funktion gilt.

Konstruktorfunktionen werden am häufigsten verwendet, wenn mehrere Objekte mit vielen Eigenschaften und Methoden mit variablen Werten erstellt werden müssen. In diesem Fall ist es besser, ein Konstruktorobjekt als „Stempel“ zu verwenden, als mehrere Objekte manuell zu schreiben.

Konstruktorobjekte

Mit Konstruktorfunktionen erstellte Objekte sind vom neuen Operator generierte Instanzen. Jede Instanz hat ihre eigenen Eigenschaften, teilt jedoch die im Prototyp der Konstruktorfunktion definierten Methoden.

Das bedeutet, dass, wenn Sie mehrere Objekte aus einer Konstruktorfunktion erstellen, diese dieselben Methoden, aber unterschiedliche Werte für ihre Eigenschaften haben.

const pessoa = {
  nome: "João",
  idade: 19,
  rua: "Rua Erva Daninha",
};

• In diesem Fall erstellt der neue Operator ein neues Objekt und bindet den Kontext (dies) an die Konstruktorfunktion

• Bei gemeinsam genutzten Methoden ist es effizienter, den Prototyp der Konstruktorfunktion hinzuzufügen. Dies vermeidet Duplikate im Speicher.
  

function NomeDoConstrutor(parâmetros) {

  this.propriedade1 = valor1;
  this.propriedade2 = valor2;

  this.método = function() {
    // Código do método
  };
}

const variavel1 = new NomeDoConstrutor(parâmetros)
const variavel2 = new NomeDoConstrutor(parâmetros)

Durch die Definition von Methoden im Prototyp einer Konstruktorfunktion vermeiden wir Codeduplizierung. Anstatt dass jedes Objekt eine Kopie der Methode hat, teilen sie alle dieselbe Methode, wodurch Speicherplatz gespart wird.

Der neue Operator erstellt ein neues Objekt und bindet den Kontext (dies) an die Konstruktorfunktion.

Bei gemeinsam genutzten Methoden ist es effizienter, sie dem Prototyp der Konstruktorfunktion hinzuzufügen, um Duplikate im Speicher zu vermeiden.

Das obige ist der detaillierte Inhalt vonObjekte in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!