Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche zwei Formen der Javascript-Vererbung gibt es?

青灯夜游
Freigeben: 2023-01-04 09:35:08
Original
1715 Leute haben es durchsucht

Javascript-Vererbung hat zwei Formen: „Objektidentitätswechsel“ und „Prototypmodus“. Der Kern des Objektidentitätswechsels besteht darin, diesen Zweck zu ändern. Bei der Prototypenvererbung handelt es sich um die Verwendung von Prototypen oder das Überschreiben von Prototypen, um den Zweck des Kopierens von Attributmethoden zu erreichen.

Welche zwei Formen der Javascript-Vererbung gibt es?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript selbst hat sich aus der Syntax der Perl-Sprache entwickelt. Es handelt sich im Wesentlichen um eine Skriptsprache. Mit der Aktualisierung der Version wird nach und nach eine objektorientierte Simulation hinzugefügt.

Ich denke, die objektorientierte Simulation von JS ist im Allgemeinen gut, weil wir keinem Konzept blind folgen können und wir OOP nicht nur um der OOP willen durchführen können. Was sind die Vorteile der objektorientierten Simulation? Aufgrund dieser Vorteile ist es die klügste Wahl, zu OOP zu gehen, also geht es Js ziemlich gut. Die Vererbung von

Js wird in vielen Büchern sorgfältig in viele Typen und Implementierungsmethoden unterteilt. Im Allgemeinen gibt es zwei Typen: Objektidentität und Prototypenmethode. Beide Methoden haben ihre eigenen Vor- und Nachteile. Ich werde sie hier zuerst auflisten und dann die Unterschiede auf der untersten Ebene analysieren:

(1) Objektidentitätswechsel

function A(name){
this.name = name;
this.sayHello = function(){alert(this.name+” say Hello!”);};
}
function B(name,id){
this.temp = A;
this.temp(name); //相当于new A();
delete this.temp; //防止在以后通过temp引用覆盖超类A的属性和方法
this.id = id;
this.checkId = function(ID){alert(this.id==ID)};
}
Nach dem Login kopieren

Beim Erstellen von Objekt B entspricht der Aufruf von temp dem Starten Beim Aufbau der A-Funktion beachten Sie bitte, dass das Objekt this im Kontext hier eine Instanz von B ist. Wenn also das Konstruktorskript A ausgeführt wird, werden alle Variablen und Methoden von A dem Objekt zugewiesen, auf das this zeigt, d. h. an Instanz von B, wodurch B erreicht wird. Erbt den Zweck der Attributmethoden von A.

Das anschließende Löschen der temporären Referenztemperatur soll verhindern, dass die Referenzänderung am Klassenobjekt von A (beachten Sie, dass es sich nicht um ein Instanzobjekt handelt) in B beibehalten wird, da eine Änderung der Temperatur direkt zu Änderungen in der Struktur von Klasse A führt (Beachten Sie, dass es kein Objekt der Klasse A ist).

Wir haben gesehen, dass im Prozess der Js-Versionsaktualisierung die Funktionen „Aufruf“ und „Anwenden“ hinzugefügt wurden, um diesen Kontextwechsel zum Erreichen von Vererbung oder umfassenderen Zwecken bequemer durchführen zu können. Ihre Prinzipien sind die gleichen, nur unterschiedliche Versionen von Parametern (ein variabler beliebiger Parameter, einer muss in einem Array als Parametersatz übergeben werden). Hier nehmen wir den Anruf als Beispiel, um die durch den Anruf implementierte Vererbung des Objektidentitätswechsels zu erläutern.

function Rect(width, height){
this.width = width;
this.height = height;
this.area = function(){return this.width*this.height;};
}
function myRect(width, height, name){
Rect .call(this,width,height);
this.name = name;
this.show = function(){
alert(this.name+” with area:”+this.area());
}
}
Nach dem Login kopieren

Über die Call-Methode, die offizielle Erklärung: Rufen Sie eine Methode eines Objekts auf, um das aktuelle Objekt durch ein anderes Objekt zu ersetzen.

call (thisOb,arg1, arg2…)
Nach dem Login kopieren

Dies ist auch eine Art Objektidentitätsvererbung. Tatsächlich passiert beim Aufruf der Aufrufmethode die Ersetzung der Kontextumgebungsvariablen this. Diese muss auf eine Instanz der Klasse myRect verweisen Wenn Sie dies jedoch als Kontextumgebungsvariable verwenden, rufen Sie die Methode namens Rect auf, die der Konstruktor der Klasse Rect ist.

Wenn Sie also zu diesem Zeitpunkt Rect aufrufen, werden die Zuweisungsattribute und -methoden tatsächlich für ein myRect-Objekt ausgeführt. Obwohl Call und Apply keine neuen Methoden nur für die Vererbung sind, können sie zur Simulation der Vererbung verwendet werden.

Dies ist, was Objekte als Vererbung bezeichnen. Es kann eine Mehrfachvererbung erreicht werden, solange Sie diesen Satz von Zuweisungsprozessen wiederholen. Derzeit wird es jedoch nicht wirklich in großem Umfang eingesetzt. Warum?

Da es einen offensichtlichen Leistungsmangel gibt, geht es hier um das Konzept von OO. Wir sagen, dass ein Objekt eine Sammlung von Mitgliedern + Mitgliedsmethoden ist. Bei der Erstellung von Objektinstanzen müssen diese nur über eigene Mitgliedsvariablen verfügen Die Methode ist lediglich ein ausführbarer Textbereich, der mit Variablen arbeitet. Dieser Bereich muss nicht für jede Instanz kopiert werden, und alle Instanzen können ihn gemeinsam nutzen.

Nun zurück zur Verwendung von Objekten durch JS, um vorzutäuschen, dass es sich um eine simulierte Vererbung handelt. Alle Mitgliedsmethoden werden dafür erstellt, das heißt, alle Instanzen verfügen über eine Kopie der Mitgliedsmethoden, was eine extreme Verschwendung von Speicherressourcen darstellt.

Andere Fehler, wie Objektidentitätswechsel und die Unfähigkeit, Variablen und Methoden in der Prototypdomäne zu erben, müssen meiner Meinung nach nicht erwähnt werden. Wir müssen es jedoch noch verstehen, insbesondere das Prinzip der Vererbung der Eigenschaften und Methoden der übergeordneten Klasse, was für das Verständnis der JS-Vererbung sehr wichtig ist.

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

(2) Prototyp-Methode

Die zweite Vererbungsmethode ist die Prototyp-Methode. Die sogenannte Prototyp-Methodenvererbung bezieht sich auf die Verwendung von Prototypen oder auf irgendeine Weise Der Prototyp wird verwendet, um den Zweck des Kopierens von Attributmethoden zu erreichen. Es gibt viele Möglichkeiten, es umzusetzen, und es kann einige Unterschiede zwischen verschiedenen Frameworks geben, aber wenn wir die Prinzipien verstehen, wird es nichts geben, was wir nicht verstehen. Schauen wir uns ein Beispiel (eine bestimmte Implementierung) an:

function Person(){
this.name = “Mike”;
this.sayGoodbye = function(){alert(“GoodBye!”);};
}
Person.prototype.sayHello = function(){alert(”Hello!”);};
function Student(){}
Student.prototype = new Person();
Nach dem Login kopieren

Der Schlüssel besteht darin, den Wert des Student-Prototypenattributs im letzten Satz dem von der Person-Klasse erstellten Objekt zuzuweisen. Hier erklärt der Autor, wie die Attribute und Methoden des Die übergeordnete Klasse wird in die Unterklasse kopiert.

Wenn ein Js-Objekt die Attribute eines Objekts liest, überprüft es immer zuerst die Attributliste seiner eigenen Domäne. Wenn es eine gibt, wird die Prototypdomäne zurückgegeben Da der Prototyp auf andere Objekte verweisen kann, sucht der Interpreter rekursiv nach dem Prototypfeld des Objekts, auf das das Prototypfeld zeigt, und stoppt, bis der Prototyp selbst gefunden wird .

这样看来,最后一句发生的效果就是将父类所有属性和方法连接到子类的prototype域上,这样子类就继承了父类所有的属性和方法,包括name、 sayGoodbye和sayHello。这里与其把最后一句看成一种赋值,不如理解成一种指向关系更好一点。

这种原型继承的缺陷也相当明显,就是继承时 父类的构造函数时不能带参数,因为对子类prototype域的修改是在声明子类对象之后才能进行,用子类构造函数的参数去初始化父类属性是无法实现的, 如下所示:

function Person(name){
this.name = name;
}
function Student(name,id){
this.id = id;
}
Student.prototype = new Person(this.name);
Nach dem Login kopieren

两种继承方式已经讲完了,如果我们理解了两种方式下子类如何把父类的属性和方法“抓取”下来,就可以自由组合各自的利弊,来实现真正合理的Js继承。下面是个人总结的一种综合方式:

function Person(name){
this.name = name;
}
Person.prototype.sayHello = function(){alert(this.name+“say Hello!”);};
function Student(name,id){
Person.call(this,name);
this.id = id;
}
Student.prototype = new Person();
Student.prototype.show = function(){
alert(“Name is:”+ this.name+” and Id is:”+this.id);
Nach dem Login kopieren

总结就是利用对象冒充机制的call方法把父类的属性给抓取下来,而成员方法尽量写进被所有对象实例共享的prototype域中,以防止方法副本重复创 建。然后子类继承父类prototype域来抓取下来所有的方法。

如想彻底理清这些调用链的关系,推荐大家多关注Js中prototype的 constructor和对象的constructor属性,这里就不多说了。

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonWelche zwei Formen der Javascript-Vererbung gibt es?. 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