Detaillierte Erläuterung der grundlegenden Musterverwendung und Verbesserungsmethoden der prototypischen Vererbung von JavaScript anhand von Beispielen

In Javascript hat jede Funktion ein Prototypattribut, das auf ihren eigenen Prototyp verweist, und das von dieser Funktion erstellte Objekt verfügt auch über ein __proto__-Attribut, das auf diesen Prototyp zeigt, und der Prototyp der Funktion ist ein Objekt, also auch dieses Objekt Es wird ein __proto__ geben, das auf seinen eigenen Prototyp verweist, und dieser geht Schicht für Schicht tiefer, bis zum Prototyp des Objektobjekts, und bildet so eine Prototypenkette.

Jede Funktion ist ein von der Funktion Funktion erstelltes Objekt, daher verfügt jede Funktion auch über ein __proto__-Attribut, das auf den Prototyp der Funktion Funktion verweist. Hier muss darauf hingewiesen werden, dass es das __proto__-Attribut jedes Objekts ist, das tatsächlich die Prototypenkette bildet, und nicht das Prototypattribut der Funktion, was sehr wichtig ist.

Grundmodus:

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

Dies ist die einfachste Möglichkeit, die Prototypenvererbung direkt dem Prototyp des Unterklassenkonstruktors zuzuordnen, sodass das Objekt der Unterklasse Sie können auf die Eigenschaften im Prototyp der übergeordneten Klasse und im Konstruktor der übergeordneten Klasse zugreifen. Die Vorteile dieser Methode liegen auf der Hand. Die Implementierung ist sehr einfach und erfordert keine besonderen Vorgänge. Gleichzeitig liegen die Nachteile auf der Hand Dies muss im Unterklassenkonstruktor wiederholt werden:

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Im obigen Fall müssen Sie nur das Namensattribut initialisieren Methode ist sehr umständlich. Daher gibt es die folgende verbesserte Methode: Ausleihen des Konstruktors

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Die obige Methode ruft den Konstruktor der übergeordneten Klasse auf, indem sie im Unterklassenkonstruktor angewendet wird, um dasselbe auszuführen Initialisierungsarbeit, sodass die Unterklasse unabhängig davon, wie viel Initialisierungsarbeit in der übergeordneten Klasse ausgeführt wird, auch dieselbe Initialisierungsarbeit ausführen kann. Bei der obigen Implementierung gibt es jedoch immer noch ein Problem, einmal im Unterklassenkonstruktor und einmal beim Zuweisen des Unterklassenprototyps. Daher müssen wir noch eine Verbesserung vornehmen

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Auf diese Weise müssen wir den Konstruktor der übergeordneten Klasse nur einmal im Konstruktor der Unterklasse ausführen und können gleichzeitig die Attribute im Prototyp der übergeordneten Klasse erben Dies entspricht auch eher der ursprünglichen Absicht des Prototyps, nämlich den Inhalt, der wiederverwendet werden muss, in den Prototyp aufzunehmen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der grundlegenden Musterverwendung und Verbesserungsmethoden der prototypischen Vererbung von JavaScript anhand von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!