Ausführliche Erläuterung der Verwendung von Prototypen in Javascript

JavaScript ist eine sehr beliebte Programmiersprache. Die Stärke von JavaScript liegt in seinen Prototypen.

Prototype ist ein Konzept im JavaScript-Objektmodell. Es ermöglicht uns, Objekte zu erstellen, indem wir Eigenschaften und Methoden von anderen Objekten erben. So funktioniert die Vererbung in JavaScript.

In diesem Artikel wird die Verwendung von Prototypen in JavaScript ausführlich vorgestellt.

1. Was ist ein Prototyp? Jedes Objekt in JavaScript wird von seinem Prototyp abgeleitet. Der Prototyp eines Objekts ist ein anderes Objekt, das über eine Prototypenkette verfügt. Jedes Objekt in dieser Prototypenkette wird Schritt für Schritt vom Originalobjekt bis zum Vorgängerobjekt – dem Prototyp des Objekts – abgeleitet.

Zum Beispiel:

//创建一个对象
var obj = {};

Der obige Code erstellt ein leeres Objekt und seine Prototypenkette sieht wie folgt aus:

obj -> Object.prototype -> Das Objekt obj wird vom Object.prototype-Objekt abgeleitet kam. Object.prototype ist der Vorfahre aller Objekte in JavaScript.

2. Prototyp und Konstruktor

Es gibt zwei Konzepte, die eng mit dem Prototyp in JavaScript verbunden sind: Konstruktor und Instanz.

Konstruktor

Ein Konstruktor ist eine Funktion, die zum Erstellen von Objekten eines bestimmten Typs verwendet wird. Konstrukteure können Prototypen verwenden, um Eigenschaften und Funktionen zu definieren. Zum Beispiel:

1. function Person(name, age) {
     this.name = name;
     this.age = age;
   }

Der obige Code definiert eine Konstruktorperson, die zwei Parameter hat: Name und Alter. Im Konstruktor verwenden wir das Schlüsselwort this, um Eigenschaften für die Objektinstanz festzulegen. Jetzt erstellen wir ein Person-Objekt:

var person1 = new Person('Tom', 20);

Dieses Objekt person1 wird vom Person-Konstruktor erstellt. Es hat zwei Eigenschaften: Name und Alter.

Instanzen

Instanzen sind von Konstruktoren erstellte Objekte. Instanzen haben Zugriff auf Eigenschaften und Methoden, die im Konstruktorprototyp definiert sind. Beispiel:

2. //定义Person的原型方法
   Person.prototype.sayHello = function() {
     console.log('Hello, my name is ' + this.name);
   }
   //调用对象方法
   person1.sayHello();

definiert eine Methode sayHello für den Person-Prototyp, auf die alle Person-Instanzen zugreifen können. Wenn wir also die Methode person1.sayHello() aufrufen, gibt sie Folgendes aus: Hallo, mein Name ist Tom.

3. Prototypische Vererbung

Prototypische Vererbung ist die wichtigste Vererbungsmethode in JavaScript. Die Umsetzung erfolgt über die Prototypenkette.

Vererbung bedeutet, dass ein Objekt auf die Eigenschaften und Methoden eines anderen Objekts zugreifen kann. Beispielsweise kann ein untergeordnetes Objekt die Eigenschaften und Methoden seines übergeordneten Objekts erben. In JavaScript kann ein Objekt durch Vererbung die Eigenschaften und Methoden eines anderen Objekts besitzen.

Wir können dem Prototypobjekt Eigenschaften und Methoden hinzufügen, und diese Eigenschaften und Methoden werden von der vom Konstruktor erstellten Instanz geerbt. Zum Beispiel:

//定义一个Animal对象
function Animal(name) {
  this.name = name;
}
//在Animal的原型上定义一个属性
Animal.prototype.color = 'red';
//创建一个实例
var cat = new Animal('Tom');

Im obigen Code definieren wir ein Tierobjekt, das ein Namensattribut und ein Prototypattribut „Farbe“ hat. Dann erstellen wir eine Katzeninstanz, die das Tierprototypattribut „Farbe“ erbt.

Mit der Methode hasOwnProperty() können Sie ermitteln, ob eine Instanz ihre eigenen spezifischen Eigenschaften enthält. Zum Beispiel:

console.log(cat.hasOwnProperty('name')); // true
console.log(cat.hasOwnProperty('color')); // false

4. Statische Methoden und Eigenschaften des Prototyps

Statische Methoden und Eigenschaften gehören zum Konstruktor selbst, nicht zur Instanz. Vor ES5 verfügte JavaScript über keinen offiziellen Mechanismus zur Bereitstellung statischer Methoden und Eigenschaften, daher fügten Entwickler diese normalerweise manuell zu Konstruktoren hinzu.

Zum Beispiel:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.create = function(name, age) {
  return new Person(name, age);
}

Im obigen Code definieren wir eine statische Methode create(). Diese Methode kann vom Konstruktor selbst aufgerufen werden, nicht von der Instanz.

In ES6 können Sie die Klassensyntax verwenden, um statische Methoden und Eigenschaften zu definieren. Zum Beispiel:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static create(name, age) {
    return new Person(name, age);
  }
}

Im obigen Code verwenden wir Klassensyntax, um eine statische Methode create() zu definieren.

5. Nachteile der prototypischen Vererbung

Die prototypische Vererbung ist sehr leistungsfähig und flexibel, da wir die Eigenschaften und Methoden jedes Objekts erben können. Aber es hat auch einige Nachteile.

Alle Instanzen teilen Prototypen

Da Prototypen gemeinsam genutzt werden, teilen alle Instanzen, die mit demselben Konstruktor erstellt wurden, denselben Prototyp. Wenn eine Instanz eine Eigenschaft oder Methode am Prototyp ändert, sind alle Instanzen betroffen.

Kann nicht auf private Variablen einer Instanz zugreifen

Prototyp-Methoden können nicht auf private Variablen einer Instanz zugreifen (d. h. auf Variablen, die im Konstruktor definiert sind). Weil diese privaten Variablen nur innerhalb des Konstruktors verwendet werden können.
2. 6. Zusammenfassung

Prototype ist ein sehr leistungsfähiges Konzept in JavaScript, das zur Implementierung von Vererbung, gemeinsamem Code usw. verwendet werden kann. In der tatsächlichen Entwicklung kann uns die prototypische Vererbung bei richtiger Anwendung dabei helfen, die Entwicklungseffizienz zu verbessern und die Codemenge zu reduzieren. Wir müssen uns jedoch auch über die Mängel der Prototypenvererbung im Klaren sein, insbesondere über Probleme wie die gemeinsame Nutzung von Prototypen und die Unfähigkeit, auf private Variablen zuzugreifen.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Prototypen in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!