Heim  >  Artikel  >  Web-Frontend  >  So richten Sie eine Prototypenkette in JavaScript ein

So richten Sie eine Prototypenkette in JavaScript ein

PHPz
PHPzOriginal
2023-04-26 14:24:19820Durchsuche

JavaScript ist eine prototypbasierte Programmiersprache. In JavaScript verfügt jedes Objekt über ein Prototypobjekt. Wir können über den JavaScript-Prototypkettenmechanismus auf die Eigenschaften und Methoden des übergeordneten Objekts zugreifen und diese erben, wodurch eine Wiederverwendung und Optimierung des Codes erreicht wird.

Der folgende Artikel befasst sich mit dem Einrichten der Prototypkette in JavaScript. Er stellt hauptsächlich vor, was die Prototypkette von JavaScript ist, wie Prototypobjekte erstellt werden und wie Instanzobjekte erstellt werden.

1. JavaScript-Prototypkette

JavaScript-Prototypkette bedeutet, dass jedes Objekt ein Prototypobjekt (Prototyp) hat, das Eigenschaften und Methoden enthält. Beim Zugriff auf die Eigenschaften und Methoden eines Objekts prüft JavaScript zunächst, ob die Eigenschaft oder Methode im Objekt selbst vorhanden ist. Wenn sie nicht vorhanden ist, durchsucht es die Prototypenkette des Objekts, bis es die Eigenschaft oder Methode findet. Wenn die Eigenschaft oder Methode nicht in der gesamten Prototypenkette gefunden wird, wird undefiniert zurückgegeben.

Wir können den Prototypkettenmechanismus von JavaScript verwenden, um Objekteigenschaften und -methoden gemeinsam zu nutzen und so eine Wiederverwendung und Optimierung des Codes zu erreichen. Normalerweise verwenden wir bei der Implementierung der Vererbungsfunktion den Prototypkettenmechanismus, um die Eigenschaften und Methoden des übergeordneten Objekts zu erben und so den Effekt der Code-Wiederverwendung zu erzielen.

2. Prototypobjekte erstellen

In JavaScript können wir Prototypobjekte durch Konstruktoren oder Objektliterale erstellen. Auf das Prototypobjekt des Konstruktors kann über das Prototypattribut zugegriffen und es festgelegt werden. Auf das Prototypobjekt eines Objektliterals kann über das Attribut __proto__ zugegriffen und es festgelegt werden.

1. Verwenden Sie den Konstruktor, um ein Prototypobjekt zu erstellen

Der Beispielcode lautet wie folgt:

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

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

Im obigen Beispiel haben wir einen Person-Konstruktor definiert und mithilfe des Prototypattributs eine sayHello-Methode zu seinem Prototypobjekt hinzugefügt.

Das mit dem Konstruktor erstellte Prototypobjekt wird vom Instanzobjekt gemeinsam genutzt. Daher können wir auf die Eigenschaften und Methoden des Prototypobjekts zugreifen und diese aufrufen, indem wir ein Instanzobjekt erstellen.

Der Beispielcode lautet wie folgt:

var person = new Person('Jack', 20);
person.sayHello(); // 输出:Hello, Jack

Im obigen Beispielcode erstellen wir zunächst eine Personenobjektinstanz über den Person-Konstruktor und geben dann eine Begrüßung aus, indem wir die Methode sayHello aufrufen.

2. Verwenden Sie Objektliterale, um Prototypobjekte zu erstellen. Der Beispielcode lautet wie folgt:

var person = {
  name: '',
  age: '',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};
. Im obigen Beispielcode verwenden wir Objektliterale, um ein Personenobjekt zu erstellen, das die Attribute und Methoden name, age und sayHello enthält . Darüber hinaus können wir in Objektliteralen das Attribut __proto__ verwenden, um auf das Prototypobjekt zuzugreifen und es festzulegen.

Der Beispielcode lautet wie folgt:

var person1 = {
  name: 'Jack',
  age: 20,
};

var person2 = {
  name: 'Lucy',
  age: 18,
};

person1.__proto__ = person;
person2.__proto__ = person;

person1.sayHello(); // 输出:Hello, Jack
person2.sayHello(); // 输出:Hello, Lucy
Im obigen Beispielcode haben wir zunächst zwei Instanzobjekte von person1 und person2 erstellt und dann ihre Prototypobjekte über das Attribut __proto__ auf das oben definierte Personenobjekt verwiesen, wodurch wir das sayHello erreicht haben Die Methode wird gemeinsam genutzt und kann direkt im Instanzobjekt aufgerufen und aufgerufen werden.

3. Instanzobjekte erstellen

In JavaScript können wir Instanzobjekte über Konstruktoren oder Objektliterale erstellen. Wenn der Konstruktor ein Instanzobjekt erstellt, kann die Verwendung des Schlüsselworts new den Konstruktor automatisch aufrufen und ein neues Instanzobjekt zurückgeben. Objektliterale erstellen Instanzobjekte direkt.

1. Verwenden Sie den Konstruktor, um ein Instanzobjekt zu erstellen

Der Beispielcode lautet wie folgt:

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

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name);
};

var person = new Person('Jack', 20);
person.sayHello(); // 输出:Hello, Jack
Im obigen Beispielcode definieren wir zunächst einen Person-Konstruktor und fügen seinem Prototypobjekt eine sayHello-Methode hinzu. Anschließend rufen wir den Person-Konstruktor mit dem Schlüsselwort new auf, erstellen eine Person-Objektinstanz und geben eine Begrüßung aus, indem wir die Methode sayHello aufrufen.

2. Verwenden Sie Objektliterale, um Instanzobjekte zu erstellen

Der Beispielcode lautet wie folgt:

var person = {
  name: '',
  age: '',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var person1 = Object.create(person);
person1.name = 'Jack';
person1.age = 20;
person1.sayHello(); // 输出:Hello, Jack

var person2 = Object.create(person);
person2.name = 'Lucy';
person2.age = 18;
person2.sayHello(); // 输出:Hello, Lucy
Im obigen Beispielcode haben wir zuerst ein Personenobjekt mithilfe von Objektliteralen erstellt und dann zwei Instanzen mithilfe der Object.create-Methode erstellt Objekte person1 und person2 und geben ihre Prototypobjekte als Personenobjekte an. Schließlich legen wir die Namens- und Altersattribute für die Objekte person1 bzw. person2 fest und geben die Begrüßung aus, indem wir die Methode sayHello aufrufen.

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

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