Wie funktioniert die Vererbung in Konstruktoren in JavaScript?

WBOY
Freigeben: 2023-08-21 20:33:08
nach vorne
1277 Leute haben es durchsucht

Wie funktioniert die Vererbung in Konstruktoren in JavaScript?

In diesem Artikel besprechen wir, wie Vererbung in JavaScript funktioniert und wie man diese objektorientierte Programmierfunktion im JavaScript-Konstruktor nutzt.

Wir werden außerdem eine kurze Einführung in Prototypobjekte in JavaScript geben. Ein gewisses vorheriges Verständnis hierfür wäre daher sehr wünschenswert.

In JavaScript ist Vererbung ein Mechanismus, durch den ein Objekt Eigenschaften und Methoden von einem anderen Objekt erbt. Dies kann durch die Verwendung von Konstruktoren und Prototypeigenschaften erreicht werden.

Beim Erstellen eines Konstruktors können Sie Prototypeigenschaften verwenden, um Eigenschaften und Methoden zum Prototypobjekt des Konstruktors hinzuzufügen. Alle mit dem Konstruktor erstellten Objekte erben dann diese Eigenschaften und Methoden.

Beispiel

Lassen Sie es uns anhand des folgenden Beispiels verstehen:

function Person(name, age) { this.name = name; this.age = age; } Person.prototype.getName = function() { return this.name; };
Nach dem Login kopieren

In diesem Beispiel verfügt der Person-Konstruktor über die Eigenschaften name und age sowie eine getName-Methode. Jedes mit dem Person-Konstruktor erstellte Objekt erbt diese Eigenschaften und Methoden vom Prototyp.

Sie können auch einen neuen Konstruktor erstellen, der von einem vorhandenen Konstruktor erbt, indem Sie den übergeordneten Konstruktor mit der Methode call oder apply aufrufen und diesen als erstes Argument übergeben.

Beispiel

Hier ist ein vollständiges Beispiel für die Vererbung in JavaScript:

// Parent constructor function function Person(name, age) { this.name = name; this.age = age; } // Adding a method to the prototype Person.prototype.getName = function() { return this.name; }; // Child constructor function function Employee(name, age, company) { // Calling the parent constructor function Person.call(this, name, age); this.company = company; } // Setting the prototype of the child constructor function Employee.prototype = Object.create(Person.prototype); Employee.prototype.constructor = Employee; // Adding a method to the child constructor function Employee.prototype.getCompany = function() { return this.company; }; const employee1 = new Employee("John", 25, "Google"); console.log(employee1.name); // "John" console.log(employee1.age); // 25 console.log(employee1.getName()); // "John" console.log(employee1.getCompany()); // "Google"
Nach dem Login kopieren

In diesem Beispiel haben wir einen übergeordneten Konstruktor namens Person, der Namens- und Altersparameter akzeptiert, und eine Methode namens getName(), die dem Prototyp des Person-Konstruktors hinzugefügt wird. Dann haben wir einen untergeordneten Konstruktor namens Employee, der die Eigenschaften und Methoden des Person-Konstruktors erbt. Der Employee-Konstruktor akzeptiert einen zusätzlichen Unternehmensparameter und verfügt über eine Methode namens getCompany(), die dem Prototyp des Employee-Konstruktors hinzugefügt wird.

In JavaScript kann also ein Konstruktor verwendet werden, um ein Objekt zu erstellen, das Eigenschaften und Methoden von einem übergeordneten Objekt erbt, indem entweder Eigenschaften und Methoden zum Prototypobjekt des Konstruktors hinzugefügt werden oder indem ein neues Objekt erstellt wird, das von einem vorhandenen Konstruktor erbt. Konstruktor, der implementiert werden soll.

Das obige ist der detaillierte Inhalt vonWie funktioniert die Vererbung in Konstruktoren in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
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 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!