Objektorientierte JavaScript-Implementierung der Vererbung basierend auf Funktionsfälschung

Aufgrund einiger Mängel bei der Implementierung der Vererbung basierend auf der Prototypenkette haben die Menschen eine andere Methode zur Implementierung der Vererbung übernommen – die Implementierung der Vererbung basierend auf Funktionsfälschung. Die Idee dieser Technik besteht darin, den Konstruktor der übergeordneten Klasse innerhalb des Konstruktors der untergeordneten Klasse aufzurufen.

Implementierung der Vererbung basierend auf Funktionsfälschung

Da in JavaScript eine Funktion ein Objekt ist, das Code in einer bestimmten Umgebung ausführt, können wir die Methode call() oder apply() verwenden Führen Sie den Konstruktor des übergeordneten Klassenobjekts für das untergeordnete Klassenobjekt aus. Schauen wir uns das folgende Beispiel an:

/* 创建父类 */
function Parent(){
  this.color = ["red","blue"];
}
 
/* 创建子类 */
function Child(){
  // 继承父类的属性
  Parent.call(this);
}

Im obigen Code erstellen wir zunächst eine übergeordnete Klasse „Parent“, dann eine Unterklasse „Child“ und verwenden „Parent.call(this)“ innerhalb der Unterklasse, um das zu vervollständigen Nachlass.

Im Artikel Eigenschaften von Funktionen haben wir die Methoden call() und apply() vorgestellt. Die Funktion dieser beiden Methoden besteht darin, Funktionen in einem bestimmten Bereich aufzurufen, was bedeutet, dass diese beiden Methoden a aufrufen können Funktion anhand ihres Namens. Hier verwenden wir Parent.call(this); innerhalb von Child, um die Vererbung abzuschließen. Dieser Satz bezieht sich zu diesem Zeitpunkt auf das Child-Objekt (in Child sollte dies das Objekt sein, das ausgeführt wird). Child), also ist es gleichbedeutend mit this.color = ["red", "blue"]; in Child, was dem Vorhandensein dieses.color-Attributs in Child entspricht, was ebenfalls eine getarnte Form ist. Die Vererbung ist abgeschlossen.

Wir können es mit der folgenden Methode überprüfen:

var c1 = new Child();     //创建子类对象c1
c1.color.push("Green");   //为c1添加新的颜色
console.info(c1.color);   //控制台输出：red,blue,Green
 
var c2 = new Child();     //创建子类对象c2
console.info(c2.color);   //控制台输出：red,blue

Im obigen Code erstellen wir das Unterklassenobjekt c1 und fügen ihm eine neue Farbe „Grün“ hinzu. So wird es sein Ausgabe in der Konsole: „rot, blau, grün“. Dann haben wir das Objekt c2 erstellt. Da ihm keine neue Farbe hinzugefügt wurde, wird in der Konsole nur die von der übergeordneten Klasse geerbte Farbe ausgegeben: „rot, blau“.

Jedes Mal, wenn ein neues Kind aufgerufen wird, entspricht dies der Durchführung einer Objektattributeinstellung. Zu diesem Zeitpunkt verfügt jedes Objekt über ein Farbattribut im Raum, ist jedoch im Prototyp nicht vorhanden, sodass keine Farbe vorhanden ist geteilt. Dies löst das Problem der Referenztypvariablen bei der Vererbung der Prototypenkette.

Unterklassenkonstruktor

Ein weiterer Nachteil der Prototypkettenvererbung besteht darin, dass der Konstruktor der übergeordneten Klasse nicht von der Unterklasse aufgerufen werden kann, sodass es keine Möglichkeit gibt, Attribute in der Unterklasse der übergeordneten Klasse zuzuweisen . Mitte. Dieses Problem lässt sich gut durch Funktionsfälschung lösen. Schauen wir uns das folgende Beispiel an:

// 创建父类
function Parent(name){
  this.name = name;
}
 
//创建子类
function Student(name,age){
  //使用伪造的方式就可以把子类的构造函数参数传递到父类中
  Parent.call(this,name); //调用父类的属性
  this.age = age;
}
 
var s1 = new Student("Leon",22);
var s2 = new Student("Ada",25);
 
console.info(s1.name + "," + s1.age);  // 控制台输出：Leon,22
console.info(s2.name + "," + s2.age);  // 控制台输出：Ada,25

Im obigen Code ruft die Unterklasse Student das Namensattribut der übergeordneten Klasse durch Funktionsfälschung auf, wodurch der Unterklasse tatsächlich ein Namensattribut hinzugefügt wird. Hier übergibt die Methode call() den Parameternamen der Student-Klasse an die übergeordnete Klasse, und der abgeschlossene Vorgang entspricht this.name = name;. Und dieses Namensattribut ist das Namensattribut der Unterklasse, nicht das Namensattribut der übergeordneten Klasse.

Probleme mit der Vererbung aufgrund von Funktionsfälschungen

In der obigen Diskussion haben wir nur darüber gesprochen, dass die Unterklasse die Attribute der übergeordneten Klasse erbt. Wie erbt die Unterklasse also die Methoden der übergeordneten Klasse? ? Wie bereits erwähnt, legen wir die Methode normalerweise im Prototyp fest. Beispielsweise gibt es in der übergeordneten Klasse einen Code wie folgt:

// 创建父类
function Parent(name){
  this.name = name;
}
 
// 父类的say()方法
Parent.prototype.say = function(){
  console.info(this.name);
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

Aufgrund der Verwendungsmethode Bei einer Funktionsfälschung wird die Unterklasse nicht abgeschlossen. Der Prototyp von Student zeigt auf die übergeordnete Klasse. Nachdem die Unterklasse die übergeordnete Klasse geerbt hat, ist die Methode say () nicht vorhanden. Die Möglichkeit, dieses Problem zu lösen, besteht darin, die Methode say() im übergeordneten Element zu platzieren und sie mit dem Schlüsselwort this zu erstellen.

// 创建父类
function Parent(name){
  this.name = name;
  // 父类的say()方法
  this.say = function(){
    console.info(this.name);
  }
}
 
//创建子类
function Student(name,age){
  Parent.call(this,name); 
  this.age = age;
}

Obwohl dies der Unterklasse ermöglicht, die say()-Methode der übergeordneten Klasse zu erben, entsteht ein weiteres Problem: Jedes Mal, wenn ein Unterklassenobjekt erstellt wird, wird eine say()-Methode generiert viel Speicherplatz frei.

Da es auch Mängel bei der Implementierung der Vererbung auf Basis von Funktionsfälschungen gibt, werden wir diese Methode nicht allein zur Vervollständigung der Vererbung verwenden, sondern eine kombinationsbasierte Methode zur Implementierung der Vererbung verwenden. Wir werden dies im nächsten Artikel besprechen Stellen Sie diese Vererbungsmethode vor.

Das Obige ist der objektorientierte Inhalt von JavaScript – Vererbung basierend auf Funktionsfälschung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!