Heim > Web-Frontend > js-Tutorial > Hauptteil

Ausführliche Erläuterung der Anwendungsfälle der JS-Objektvererbung

php中世界最好的语言
Freigeben: 2018-06-04 10:48:55
Original
1491 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Anwendungsfälle der JS-Objektvererbung ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung der JS-Objektvererbung? Das Folgende ist ein praktischer Fall.

Das Modifizieren von Objekten, die Sie nicht besitzen, ist eine gute Lösung für bestimmte Probleme. In einem „gutartigen“ Zustand geschieht dies normalerweise nicht; es kann passieren, dass der Entwickler auf ein Problem gestoßen ist und es dann durch Ändern des Objekts gelöst hat. Dennoch gibt es immer mehr als eine Lösung für ein bekanntes Problem. Ein Großteil des Informatikwissens wurde entwickelt, um schwierige Probleme in statisch typisierten Sprachumgebungen wie Java zu lösen. Möglicherweise gibt es Methoden, sogenannte Design Patterns, die diese Objekte nicht direkt verändern, sondern erweitern.

Außerhalb von JS ist die Vererbung die beliebteste Form der Objekterweiterung. Wenn ein Objekttyp bereits das meiste tut, was Sie wollen, erben Sie von ihm und fügen Sie dann einige Funktionen hinzu. In JS gibt es zwei Grundformen: objektbasierte Vererbung und typbasierte Vererbung.

In JS gibt es bei der Vererbung immer noch einige große Einschränkungen. Erstens können Sie nicht von DOM- oder BOM-Objekten erben. Zweitens funktioniert die Vererbung vom Array aufgrund der komplizierten Beziehung zwischen dem Array-Index und der Längeneigenschaft nicht ordnungsgemäß.

Objektbasierte Vererbung

Bei der objektbasierten Vererbung, auch oft als prototypische Vererbung bezeichnet, erbt ein Objekt ein anderes Objekt, ohne den Konstruktor aufzurufen. Die ES5-Methode Object.create() ist die einfachste Möglichkeit, diese Art der Vererbung zu implementieren. Zum Beispiel:

var person = {  name: 'Nicholas',  sayName: function () {    console.log(this.name);
  }
};var myPerson = Object.create(person);
myPerson.sayName(); // "Nicholas"
Nach dem Login kopieren

In diesem Beispiel wird ein neues Objekt „myPerson“ erstellt, das von „person“ erbt. Diese Vererbungsmethode ähnelt dem Prototyp von „myPerson“, der auf „person“ gesetzt wird. Von da an kann „myPerson“ auf die Eigenschaften und Methoden von „person“ zugreifen, ohne die Variable mit demselben Namen für ein neues Objekt neu definieren zu müssen. Wenn Sie beispielsweise myPerson.sayName() neu definieren, wird der Zugriff auf person.sayName() automatisch unterbrochen: Die Methode

myPerson.sayName = function () {  console.log('Anonymous');
};
myPerson.sayName(); // "Anonymous"person.sayName(); // "Nicholas"
Nach dem Login kopieren

Object.create() kann einen zweiten Parameter sowie die Eigenschaften und Methoden im Parameterobjekt angeben wird dem neuen Objekt hinzugefügt. Zum Beispiel:

var myPerson = Object.create(person, {  name: {    value: 'Greg'
  }
});
myPerson.sayName(); // "Greg"person.sayName(); // "Nicholas"
Nach dem Login kopieren

Das in diesem Beispiel erstellte myPerson-Objekt hat seinen eigenen Namensattributwert, daher zeigt der Aufruf von sayName() „Greg“ anstelle von „Nicholas“ an.

Sobald ein neues Objekt auf diese Weise erstellt wurde, kann das neue Objekt völlig frei geändert werden. Schließlich sind Sie der Eigentümer des Objekts und können in Ihrem Projekt Methoden hinzufügen, vorhandene Methoden überschreiben oder sogar Methoden löschen (oder deren Zugriff verhindern).

Typbasierte Vererbung

Die typbasierte Vererbung funktioniert auf die gleiche Weise wie die objektbasierte Vererbung. Sie erbt von einem vorhandenen Objekt. Die Vererbung hängt hier vom Prototyp ab. Daher wird die typbasierte Vererbung durch Konstruktoren und nicht durch Objekte implementiert. Dies bedeutet, dass auf den Konstruktor des geerbten Objekts zugegriffen werden muss. Im Vergleich zu nativen Typen in JS ist die typbasierte Vererbung am besten geeignet, wenn Entwickler Konstruktoren definieren. Gleichzeitig erfordert die typbasierte Vererbung im Allgemeinen zwei Schritte: zuerst die Prototypenvererbung und dann die Konstruktorvererbung. Bei der Konstruktorvererbung wird das neu erstellte Objekt beim Aufruf des Konstruktors der Superklasse als dieser Wert übergeben. Beispiel:

function Person (name) {  this.name = name;
}function Author (name) {
  Person.call(this, name); // 继承构造器}
Author.prototype = new Person();
Nach dem Login kopieren

In diesem Code erbt der Autortyp von Person. Der Attributname wird tatsächlich von der Person-Klasse verwaltet, sodass Person.call(this, name) dem Person-Konstruktor ermöglicht, das Attribut weiter zu definieren. Darauf wird der Person-Konstruktor ausgeführt, der auf ein Author-Objekt zeigt, sodass der endgültige Name auf diesem Author-Objekt definiert wird.

Im Vergleich zur objektbasierten Vererbung ist die typbasierte Vererbung beim Erstellen neuer Objekte flexibler. Durch die Definition eines Typs können Sie mehrere Instanzobjekte erstellen, die alle von einer gemeinsamen Oberklasse erben. Der neue Typ sollte die Eigenschaften und Methoden, die er verwenden muss, klar definieren und sie sollten sich völlig von denen in der Oberklasse unterscheiden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So vermeiden Sie Nullvergleiche in der Webentwicklung

Warum Sie die Verwendung globaler Variablen vermeiden müssen Webentwicklung

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Anwendungsfälle der JS-Objektvererbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!