Heim > Web-Frontend > js-Tutorial > JavaScript-Prototypen verstehen: Ein Schlüssel zur Beherrschung von OOP

JavaScript-Prototypen verstehen: Ein Schlüssel zur Beherrschung von OOP

Susan Sarandon
Freigeben: 2024-11-27 13:37:11
Original
462 Leute haben es durchsucht

Understanding JavaScript Prototypes: A Key to Mastering OOP

Da JavaScript eine prototypbasierte Sprache ist, erben Objekte in der Sprache Attribute und Funktionen von Prototypen. Dieses Entwurfsmuster ist für das Verständnis der objektorientierten Programmierung (OOP) von JavaScript unerlässlich. Das Verständnis von Prototypen und deren Verwendung ist von entscheidender Bedeutung, wenn Sie mehr über JavaScript erfahren möchten. In diesem Beitrag wird die Idee von Prototypen erörtert, wie man sie verwendet und wie sie effektiveren, wiederverwendbareren und optimierten Code ermöglichen.

Was ist ein Objekt in JavaScript?

Bevor wir zu Prototypen übergehen, klären wir zunächst, was ein JavaScript-Objekt ist. Ein JavaScript-Objekt ist im Grunde eine Sammlung von Schlüssel-Wert-Paaren. JavaScript-Objekte sind flexibel und können auf verschiedene Arten erstellt werden, unter anderem mit Factory-Funktionen, Konstruktorfunktionen und Objektliteralen.

Objekte erstellen

1. Objektliteral

Der einfachste Weg, ein Objekt zu erstellen, ist die Verwendung eines Objektliterals:

1

2

3

4

let obj = {

    name: 'John',

    age: 30

};

Nach dem Login kopieren
Nach dem Login kopieren

2. Konstruktorfunktion

Eine Konstruktorfunktion wird verwendet, um Instanzen von Objekten mit ähnlichen Eigenschaften zu erstellen:

1

2

3

4

5

6

function Person(name, age) {

    this.name = name;

    this.age = age;

}

 

let person1 = new Person('Alice', 25);

Nach dem Login kopieren
Nach dem Login kopieren

3. Fabrikfunktion

Eine Factory-Funktion gibt bei jedem Aufruf ein neues Objekt zurück:

1

2

3

4

5

6

7

8

function createPerson(name, age) {

    return {

        name: name,

        age: age

    };

}

 

let person2 = createPerson('Bob', 40);

Nach dem Login kopieren
Nach dem Login kopieren

Rückgabe von Objekten aus Funktionen

JavaScript-Funktionen sind leistungsstark, da sie Objekte zurückgeben können, was zum Erstellen von Instanzen mit bestimmten Eigenschaften und Methoden nützlich ist.

Beispiel: Ein Objekt von einer Funktion zurückgeben

1

2

3

4

5

6

7

8

9

10

11

12

function createCar(make, model) {

    return {

        make: make,

        model: model,

        getDetails: function() {

            return `${this.make} ${this.model}`;

        }

    };

}

 

let car = createCar('Toyota', 'Corolla');

console.log(car.getDetails()); // Toyota Corolla

Nach dem Login kopieren
Nach dem Login kopieren

Optimierung der Objekterstellung mit Prototypen

Einer der Schlüsselaspekte der prototypbasierten Natur von JavaScript ist die Fähigkeit, Methoden für den Prototyp eines Objekts zu definieren. Dies optimiert die Speichernutzung, indem es mehreren Objekten ermöglicht, dieselben Methoden zu verwenden, anstatt sie für jedes Objekt einzeln zu definieren.

Beispiel für eine Speicheroptimierung

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function Person(name, age) {

    this.name = name;

    this.age = age;

}

 

Person.prototype.getDetails = function() {

    return `${this.name} is ${this.age} years old`;

};

 

let person1 = new Person('Alice', 25);

let person2 = new Person('Bob', 30);

 

console.log(person1.getDetails()); // Alice is 25 years old

console.log(person2.getDetails()); // Bob is 30 years old

Nach dem Login kopieren
Nach dem Login kopieren

Im obigen Beispiel verwenden sowohl Person1 als auch Person2 dieselbe getDetails-Methode, die im Prototyp definiert ist. Dies bedeutet, dass nicht jeder über eine eigene Kopie der Methode verfügt, wodurch Speicherplatz gespart wird.

Object.create() und Prototypen

Mit der Methode Object.create() können Sie ein neues Objekt erstellen, das von einem bestimmten Prototyp erbt.

Beispiel: Verwenden von Object.create()

1

2

3

4

5

6

7

8

9

let personProto = {

    greet: function() {

        console.log(`Hello, my name is ${this.name}`);

    }

};

 

let person = Object.create(personProto);

person.name = 'Charlie';

person.greet(); // Hello, my name is Charlie

Nach dem Login kopieren

In diesem Fall erbt person von personProto, was bedeutet, dass es Zugriff auf die Greet-Methode hat.

Prototypen im Detail verstehen

Jedes Objekt in JavaScript hat einen Prototyp, der auch ein Objekt ist. Dieses Prototypobjekt kann über eigene Eigenschaften und Methoden verfügen, die vom Objekt geerbt werden. Diese Vererbungskette wird als Prototypenkette bezeichnet.

Beispiel: Prototypen in Aktion

1

2

3

4

let obj = {

    name: 'John',

    age: 30

};

Nach dem Login kopieren
Nach dem Login kopieren

In diesem Beispiel ist dog eine Instanz von Animal und erbt die Speak-Methode von Animal.prototype.

Konstruktorfunktionen und Prototypen

Konstruktorfunktionen sind eine gängige Methode zum Erstellen mehrerer Instanzen desselben Objekttyps. Diese Funktionen arbeiten mit Prototypen zusammen, um Methoden instanzübergreifend zu teilen.

Beispiel: Konstruktorfunktion mit Prototypmethoden

1

2

3

4

5

6

function Person(name, age) {

    this.name = name;

    this.age = age;

}

 

let person1 = new Person('Alice', 25);

Nach dem Login kopieren
Nach dem Login kopieren

Hier teilen sich book1 und book2 dank der Prototypenvererbung die getDetails-Methode.

Das neue Schlüsselwort und das dieses Schlüsselwort

Wenn Sie das Schlüsselwort new mit einer Konstruktorfunktion verwenden, wird eine neue Instanz des Objekts erstellt und das Schlüsselwort this an die neue Instanz gebunden.

Beispiel: Verwendung des neuen Schlüsselworts

1

2

3

4

5

6

7

8

function createPerson(name, age) {

    return {

        name: name,

        age: age

    };

}

 

let person2 = createPerson('Bob', 40);

Nach dem Login kopieren
Nach dem Login kopieren

In diesem Fall erstellt das Schlüsselwort new eine neue Instanz von Laptop, und dies verweist auf diese Instanz innerhalb des Konstruktors.

ES6-Klassensyntax

In ES6 führte JavaScript die Klassensyntax ein, die eine bequemere und vertrautere Möglichkeit zum Definieren von Konstruktorfunktionen und Prototypen bietet. Es ist jedoch wichtig zu beachten, dass Klassen in JavaScript nur syntaktischer Zucker gegenüber dem prototypbasierten Vererbungsmodell sind.

Beispiel: Verwendung von Klassen

1

2

3

4

5

6

7

8

9

10

11

12

function createCar(make, model) {

    return {

        make: make,

        model: model,

        getDetails: function() {

            return `${this.make} ${this.model}`;

        }

    };

}

 

let car = createCar('Toyota', 'Corolla');

console.log(car.getDetails()); // Toyota Corolla

Nach dem Login kopieren
Nach dem Login kopieren

Hier verhält sich die Person-Klasse ähnlich wie das Beispiel der Konstruktorfunktion und der Prototypmethode, jedoch mit einer prägnanteren Syntax.

Arrays und Prototypen

JavaScript-Arrays sind Objekte und wie alle Objekte erben sie Eigenschaften und Methoden von ihrem Prototyp Array.prototype. Aus diesem Grund können Sie Array-spezifische Methoden wie Push, Pop und Reduce für Arrays aufrufen.

Beispiel: Arbeiten mit Arrays und Prototypen

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function Person(name, age) {

    this.name = name;

    this.age = age;

}

 

Person.prototype.getDetails = function() {

    return `${this.name} is ${this.age} years old`;

};

 

let person1 = new Person('Alice', 25);

let person2 = new Person('Bob', 30);

 

console.log(person1.getDetails()); // Alice is 25 years old

console.log(person2.getDetails()); // Bob is 30 years old

Nach dem Login kopieren
Nach dem Login kopieren

In diesem Beispiel erweitern wir Array.prototype um eine Summenmethode, die von allen Array-Instanzen gemeinsam genutzt wird.

Abschluss

Die Grundlage des objektorientierten Programmierparadigmas von JavaScript sind Prototypen. Sie können effektiveren und wiederverwendbareren Code schreiben, wenn Sie verstehen, wie sie funktionieren. Im Folgenden sind die wichtigsten Schlussfolgerungen aufgeführt:

  1. Objekte sind Schlüssel-Wert-Paare, die mithilfe von Literalen, Konstruktoren oder Factory-Funktionen erstellt werden.
  2. Prototypen ermöglichen Objekten die gemeinsame Nutzung von Methoden und Eigenschaften und verbessern so die Speichereffizienz.
  3. Verwenden Sie Object.create(), um Objekte mit einem angegebenen Prototyp zu erstellen.
  4. Konstruktorfunktionen und Klassen helfen beim Erstellen mehrerer Instanzen eines Objekttyps mit im Prototyp definierten Methoden.
  5. Das Schlüsselwort new erstellt Instanzen, und this verweist auf die Instanz innerhalb des Konstruktors.
  6. Arrays erben Methoden von Array.prototype, das selbst ein Objekt ist.

Sie können die objektorientierten Funktionen von JavaScript vollständig nutzen und wiederverwendbaren, effektiven Code schreiben, indem Sie sich mit Prototypen auskennen. Viel Spaß beim Codieren!

Folgen Sie mir auf: Github Linkedin

Das obige ist der detaillierte Inhalt vonJavaScript-Prototypen verstehen: Ein Schlüssel zur Beherrschung von OOP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage