Drei Vererbungsmethoden in JavaScript
|
erben 1. Was ist Vererbung?Vererbung: Zunächst einmal ist Vererbung eine Beziehung, die Beziehung zwischen Klassen. In JS gibt es keine Klassen, aber Klassen können durch Konstruktoren simuliert werden, und dann kann Vererbung durch Prototypen erreicht werden.
Wir können uns den Prototyp vorstellen. Seine beiden Funktionen sind:
Vererbung ist eine Beziehung: die Beziehung zwischen der übergeordneten Klassenebene und der Klassenebene Beispiel: Personenkategorien: Name, Geschlecht, Alter, Essen, Schlafen Schülerkategorien: Name, Geschlecht, Alter, Ess-, Schlaf- und Lernverhalten Lehrerkategorie: Name, Geschlecht, Alter, Mahlzeiten, Schlaf, Gehalt, Unterrichtsverhalten Programmierer: Name, Geschlecht, Alter, Essen, Schlafen, Gehalt, Code schreiben Fahrerkategorie: Name, Geschlecht, Alter, Mahlzeiten, Schlaf, Gehalt, Fahren Tierkategorien: Gewicht, Farbe, Fressen Hundekategorien: Gewicht, Farbe, Fressen, Beißen Erha-Kategorie: Gewicht, Farbe, Essen, Beißen, um den Besitzer glücklich zu machen, wau wau, du bist so hübsch Objektorientierte Funktionen: Kapselung, Vererbung, Polymorphismus
2. Drei Methoden der JavaScript-VererbungVererbung von Konstruktoreigenschaften: Ausleihen von Konstruktoren Beim Vererben müssen Sie den Zeiger des Prototyps nicht ändern, sondern können einfach den Konstruktor des übergeordneten Elements aufrufen, um den Eigenschaften Werte zuzuweisen. —— Konstruktor ausleihen: Übernehmen Sie den Konstruktor des zu vererbenden übergeordneten Elements und verwenden Sie ihn. Ausleihender Konstruktor:
Vorteile: Lösen Sie das Problem der Attributvererbung und nicht doppelter Werte Fehler: Methoden in übergeordneten Klassen können nicht vererbt werden
Funktion Person (Name, Alter) {
dieser.Typ = "Mensch"
dieser.name = Name
this.age = Alter
}
Funktion Student (Name, Alter) {
// Konstruktor ausleihen, um das Attributmitglied Person.call(this, name, age) zu erben
}
var s1 = Student('Student', 18)
console.log(s1.Typ, s1.Name, s1.Alter) // => Mensch Zhang San 18
Beispiele:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Skript>
Funktion Person(Name, Alter, Geschlecht, Gewicht) {
dieser.name = Name;
dieses.Alter = Alter;
dies.Geschlecht = Geschlecht;
dieses.Gewicht = Gewicht;
}
Person.prototype.sayHi = Funktion () {
console.log("Hallo");
};
Funktion Student(Name,Alter,Geschlecht,Gewicht,Punktzahl) {
//Den Konstruktor Person.call(this,name,age,sex,weight); ausleihen.
this.score = Punktzahl;
}
var stu1 = neuer Student("Xiaoming",10,"männlich","10kg","100");
Konsole.log(stu1.Name, stu1.Alter, stu1.Geschlecht, stu1.Gewicht, stu1.Punktzahl);
var stu2 = new Student("Xiaohong",20,"Weiblich","20kg","120");
Konsole.log(stu2.Name, stu2.Alter, stu2.Geschlecht, stu2.Gewicht, stu2.Punktzahl);
var stu3 = neuer Student("Xiao Li",30,"Yao","30kg","130");
Konsole.log(stu3.Name, stu3.Alter, stu3.Geschlecht, stu3.Gewicht, stu3.Punktzahl);
</Skript>
</Kopf>
<Text>
</body>
</html>
Vererbung von Prototypmethoden an Konstruktoren: Kopiervererbung (for-in) Kopiervererbung; die Eigenschaften oder Methoden eines Objekts direkt auf ein anderes Objekt kopieren
Funktion Person (Name, Alter) {
dieser.Typ = "Mensch"
dieser.name = Name
this.age = Alter
}
Person.prototype.sayName = Funktion () {
console.log('hallo ' + dieser.name)
}
Funktion Student (Name, Alter) {
Person.call(dies, Name, Alter)
}
// Das Prototypobjekt kopiert und erbt die Mitglieder des Prototypobjekts für (var key in Person.prototype) {
Student.Prototyp[Schlüssel] = Person.Prototyp[Schlüssel]
}
var s1 = Student('Student', 18)
s1.sayName() // => hallo Zhang SanBeispiele:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Skript>
//Vererbung kopieren; Eigenschaften oder Methoden eines Objekts direkt in ein anderes Objekt kopieren Funktion Person() {
}
Person.Prototyp.Alter=10;
Person.prototype.sex="Männlich";
Person.Prototyp.Höhe=100;
Person.prototype.play = Funktion () {
console.log("Spaß haben");
};
var obj2={};
//Person hat einen Prototyp in seiner Konstruktion. Prototyp ist ein Objekt. Darin sind Alter, Geschlecht, Größe und Spiel alles Eigenschaften oder Methoden des Objekts. for(var key in Person.prototype){
obj2[Schlüssel]=Person.prototype[Schlüssel];
}
console.dir(obj2);
obj2.spielen();
</Skript>
</Kopf>
<Text>
</body>
</html>
Eine andere Art der Vererbung: Prototypvererbung Vererbung von Prototypen: Änderung der Richtung des Prototyps
Funktion Person (Name, Alter) {
dieser.Typ = "Mensch"
dieser.name = Name
this.age = Alter
}
Person.prototype.sayName = Funktion () {
console.log('hallo ' + dieser.name)
}
Funktion Student (Name, Alter) {
Person.call(dies, Name, Alter)
}
//Verwende die Eigenschaften des Prototyps, um Vererbung zu erreichen Student.prototype = new Person()
var s1 = Student('Student', 18)
console.log(s1.type) // => Mensch
s1.sayName() // => hallo Zhang SanKombinierte Vererbung: Prototyp + geliehene Konstruktorvererbung
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Skript>
//Vererbung des Prototyps //Konstruktor ausleihen um Vererbung zu implementieren //Kombinierte Vererbung: Vererbung des Prototyps + Vererbung des Konstruktors ausleihen function Person(name, age, sex) {
dies.name=Name;
dies.Alter=Alter;
dies.Geschlecht=Geschlecht;
}
Person.prototype.sayHi = Funktion () {
console.log("Sawadee Ka");
};
Funktion Student(Name,Alter,Geschlecht,Punktzahl) {
//Konstruktor ausleihen: Problem doppelter Attributwerte Person.call(this,name,age,sex);
dies.score=Punktzahl;
}
//Ändern Sie den Prototyp, der auf ---- Vererbung zeigt. Student.prototype = new Person(); //Übergeben Sie den Wert nicht. Student.prototype.eat = function () {
console.log("essen");
};
var stu=new Student("Student",20,"Student","100 Studenten");
Konsole.log(stu.name,stu.alter,stu.geschlecht,stu.score);
stu.sayHi();
stu.essen();
var stu2=new Student("Studentenname",200,"Student","1010er");
Konsole.log(stu2.Name,stu2.Alter,stu2.Geschlecht,stu2.Score);
stu2.sayHi();
stu2.essen();
//Sowohl Eigenschaften als auch Methoden werden vererbt</script>
</Kopf>
<Text>
</body>
</html>
VererbungszusammenfassungVererbung von Prototypen: Änderung der Richtung des Prototyps Ausleihen der Konstruktorvererbung: löst hauptsächlich das Problem der Attribute Kombinierte Vererbung: Prototypvererbung + geliehene Konstruktorvererbung Es kann sowohl Attributprobleme als auch Methodenprobleme lösen Kopiervererbung: Dabei werden die Attribute oder Methoden, die in einem Objekt gemeinsam genutzt werden müssen, durch direktes Durchlaufen in ein anderes Objekt kopiert. ZusammenfassenDamit ist dieser Artikel über die drei Methoden der JavaScript-Vererbung abgeschlossen. Weitere Informationen zu JavaScript-Vererbungsmethoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: Methode zur Wiederherstellung von Betriebs- und Wartungsdaten der MySQL-Datenbank
Artikel empfehlen
Verwenden Sie die CSS-Eigenschaft border-radius, um den Bogen festzulegen
Phänomen: Wandeln Sie das Div in einen Kreis, ein...
Detaillierte Anweisungen zur Installation von MySQL8.0.19 im CentOS7.5-Tutorial
1. Einleitung Dieser Artikel enthält keine Screen...
Natives JS zum Erzielen eines coolen Paging-Effekts
In diesem Artikel wird anhand eines Beispiels ein...
Tiefgreifendes Verständnis des asynchronen Wartens in Javascript
In diesem Artikel untersuchen wir, warum async/aw...
Natives JavaScript-Message Board
In diesem Artikel wird der spezifische JavaScript...
So installieren Sie das MySQL6-Initialisierungsinstallationskennwort unter CentOS7
1. Stoppen Sie zuerst den Datenbankserver Dienst ...
MySQL-Datenbanktabellendesign mit Baumstruktur
Inhaltsverzeichnis Vorwort 1. Basisdaten 2. Verer...
Analyse der MySQL-Transaktionsmerkmale und Ebenenprinzipien
1. Was ist eine Transaktion? Eine Datenbanktransa...
JavaScript-Webformularfunktion Kommunikation voller praktischer Informationen
1. Einleitung Vorher haben wir über das Front-End...
Implementierung eines MySQL-Gemeinschaftsindex (zusammengesetzter Index)
Gemeinsamer Index Die Definition des gemeinsamen ...
Vue 2.0 Grundlagen im Detail
Inhaltsverzeichnis 1. Funktionen 2. Beispiele 3. ...
Einführung in die Unterschiede zwischen HTML-Name, ID, Klasse (Format/Anwendungsszenario/Funktionen) usw.
Auf einer Seite gibt es viele Steuerelemente (Elem...
So lassen Sie eine https-Website den https-Referrer senden und den http-Referrer springen
Dieser Artikel beschreibt einen Vorschlag für ein...
Docker-Fallanalyse: Erstellen eines Redis-Dienstes
Inhaltsverzeichnis 1 Mount-Verzeichnisse und Date...
Eine kurze Diskussion über die Magie von parseInt() in JavaScript
Ursache Der Grund für das Schreiben dieses Blogs ...