JavaScript verwendet standardmäßig die prototypische Vererbung. Obwohl es kein Konzept einer Klasse gibt, kann ihre Funktion als Konstruktor fungieren. Der Konstruktor kann in Kombination mit this und new eine Java-ähnliche Klasse erstellen. Daher kann JavaScript die klassenbasierte Vererbung emulieren, indem es sich selbst erweitert.
JavaScript verwendet wie andere objektorientierte Sprachen Referenzen für Objekttypen. Die Variable, die das Objekt enthält, ist nur eine Adresse, während die Basistypdaten der Wert sind. Bei der Speicherung von Objekten auf Prototypen kann es einige Fallstricke geben.
Schauen wir uns zunächst das erste Beispiel an
Kopieren Sie den Codecode wie folgt:
var create = function() {
Funktion Fn() {}
Rückgabefunktion (übergeordnet) {
Fn.prototype = übergeordnetes Element
neue Fn zurückgeben
}
}()
var parent = {
Name: 'Jack',
Alter: 30,
isMarried: falsch
}
var child = create(parent)
console.log(child)
Die Create-Tool-Funktion implementiert eine grundlegende Prototypenvererbung. Bei jedem Aufruf von create wird ein neues Objekt basierend auf dem übergeordneten Objekt kopiert. Hier verfügt parent über drei Attribute, die alle grundlegende Datentypen sind: Zeichenfolge, Zahl und Boolean.
Ändern Sie nun das untergeordnete Element, um festzustellen, ob es Auswirkungen auf das übergeordnete Element hat.
Kopieren Sie den Codecode wie folgt:
child.name = 'Lilie'
Kinderalter = 20,
child.isMarried = true
console.log(child)
console.log(parent)
Die Ergebnisse sind wie folgt
Das heißt, eine Änderung des untergeordneten Elements hat keine Auswirkungen auf das übergeordnete Element.
Schauen wir uns ein anderes Beispiel an
Kopieren Sie den Codecode wie folgt:
var create = function() {
Funktion Fn() {}
Rückgabefunktion (übergeordnet) {
Fn.prototype = übergeordnetes Element
neue Fn zurückgeben
}
}()
var parent = {
Daten: {
Name: 'Jack',
Alter: 30,
isMarried: falsch
},
Sprache: ['Java']
}
var child = create(parent)
child.data.name = 'Lilie'
child.data.age = 20
child.data.isMarried = true
child.sprache.push('javascript')
console.dir(child)
console.dir(parent)
Beachten Sie, dass die beiden Attribute von parent hier, Daten und Sprache, beide Referenztypen sind, eines ist ein Objekt und das andere ein Array. Das untergeordnete Element erbt weiterhin vom übergeordneten Element und ändert dann das untergeordnete Element. Die Ergebnisse sind wie folgt
Wie Sie sehen, wurde zu diesem Zeitpunkt auch das Elternteil geändert und der Name, das Alter usw. des Kindes sind gleich. Dies ist bei der Verwendung der prototypischen Vererbung zu beachten.
Eine bessere Möglichkeit, die Vererbung zu nutzen, ist:
1. Datenattribute übernehmen die Klassenvererbung (davon abhängig), sodass sie auch im Neuzustand über Parameter konfiguriert werden können
2. Die Methode übernimmt die prototypische Vererbung, wodurch Speicher gespart werden kann. Gleichzeitig hat das Überschreiben von Methoden durch Unterklassen keine Auswirkungen auf die übergeordnete Klasse.
Das Folgende ist eine Schreibwerkzeugfunktion, die die beiden oben genannten Punkte erfüllt.
Kopieren Sie den Codecode wie folgt:
/**
* @param {String} Klassenname
* @param {String/Function} superCls
* @param {Funktion} Fabrik
*/
Funktion $class(name, superClass, Factory) {
if (superClass === '') superClass = Objekt
functionclazz() {
if (typeof this.init === 'function') {
this.init.apply(this, Argumente)
}
}
var p = clazz.prototype = neue SuperCls
clazz.prototype.constructor = clazz
clazz.prototype.className = Klassenname
var supr = superCls.prototype
window[className] = clazz
Factory.call(p, supr)
}
Seien Sie beim Platzieren eines Objekttyps im Prototyp einer übergeordneten Klasse vorsichtig, wenn dieser von Unterklassen geändert wird. In diesem Fall werden alle Instanzen von Unterklassen geändert, die von der übergeordneten Klasse erben. Und die dadurch verursachten Fehler sind sehr schwer zu finden.
ES5 wurde eine neue API hinzugefügt, um die prototypische Vererbung zu implementieren: Object.create. Sie können damit die obige selbstimplementierte Erstellungsfunktion wie folgt ersetzen
Kopieren Sie den Codecode wie folgt:
var parent = {
Name: 'Jack',
Alter: 30,
isMarried: falsch
}
var child = Object.create(parent)
console.log(child)