Ausführliche Erläuterung von Beispielen für die Vererbung von Javascript-Nicht-Konstruktoren

Dieser Artikel stellt Ihnen die Implementierung von „Vererbung“ ohne Verwendung von Konstruktoren vor. Es ist sehr einfach, wenn Sie es sorgfältig verstehen.

1. Was ist die Vererbung von „Nicht-Konstrukteur“?

Zum Beispiel gibt es ein Objekt namens „Chinesisch“.

var Chinese = { nation:'中国' };

Es gibt ein weiteres Objekt namens „Doktor“.

　var Doctor ={ career:'医生' }

Wie kann ich „Doctor“ „Chinese“ erben lassen? Mit anderen Worten, wie kann ich ein Objekt von „Chinese Doctor“ generieren?

Hier ist zu beachten, dass es sich bei diesen beiden Objekten um gewöhnliche Objekte und nicht um Konstruktoren handelt und die „Vererbung“ nicht mit der Konstruktormethode implementiert werden kann.

2. Object()-Methode

Douglas Crockford, der Erfinder des JSON-Formats, hat eine object()-Funktion vorgeschlagen, die dies tun kann.

function object(o) {

　　　　function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　}

Diese Funktion object() macht eigentlich nur eines, nämlich das Prototypattribut des untergeordneten Objekts auf das übergeordnete Objekt zu verweisen und dadurch zu erstellen Das untergeordnete Objekt ist mit dem übergeordneten Objekt verbunden. Bei Verwendung von

besteht der erste Schritt darin, ein untergeordnetes Objekt basierend auf dem übergeordneten Objekt zu generieren:

var Doctor = object(Chinese);

Anschließend fügen Sie die Attribute des untergeordneten Objekts selbst hinzu:

Doctor.career = '医生';

Zu diesem Zeitpunkt hat das untergeordnete Objekt die Eigenschaften des übergeordneten Objekts geerbt. 　

alert(Doctor.nation); //中国

3. Flache Kopie

Neben der Verwendung der „Prototypenkette“ gibt es noch eine andere Denkweise: Kopieren Sie die Die Attribute des übergeordneten Objekts werden alle in das untergeordnete Objekt kopiert, und es kann auch eine Vererbung erreicht werden.

Die folgende Funktion dient zum Kopieren:

　　function extendCopy(p) {

　　　　var c = {};

　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　 }

　　　　c.uber = p;

　return c; }

Wenn Sie sie verwenden, schreiben Sie so: 　

var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国

Allerdings gibt es bei einer solchen Kopie ein Problem. Das heißt, wenn die Eigenschaften des übergeordneten Objekts denen eines Arrays oder eines anderen Objekts entsprechen, erhält das untergeordnete Objekt tatsächlich nur eine Speicheradresse und keine echte Kopie, sodass die Möglichkeit besteht, dass das übergeordnete Objekt dies getan hat manipuliert.

Bitte sehen Sie, fügen Sie jetzt dem Chinesischen das Attribut „Geburtsort“ hinzu, und sein Wert ist ein Array. 　

Chinese.birthPlaces = ['北京','上海','香港'];

Durch die Funktion „extendCopy()“ erbt Doctor Chinesisch.

var Doctor = extendCopy(Chinese);

Dann fügen wir eine Stadt für den „Geburtsort“ des Doktors hinzu:

Doctor.birthPlaces.push('厦门');

Was ist passiert? Auch der „Geburtsort“ der Chinesen wurde geändert!

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

extendCopy() kopiert also nur grundlegende Datentypen. Wir nennen diese Kopie „flache Kopie“. Auf diese Weise wurde die Vererbung im frühen jQuery implementiert.

4. Deep Copy

Die sogenannte „Deep Copy“ ist die Fähigkeit, die echte Kopie von Arrays und Objekten zu realisieren. Die Implementierung ist nicht schwierig. Rufen Sie einfach rekursiv „Shallow Copy“ auf.

　　function deepCopy(p, c) {

　　　　var c = c || {};

　　　　for (var i in p) {

　　　　　　if (typeof p[i] === 'object') {

　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};

　　　　　　　　deepCopy(p[i], c[i]);

　　　　　　} else {

　　　　　　　　　c[i] = p[i];

　　　　　　}
}

　　　　return c; }

Schreiben Sie bei der Verwendung folgendermaßen:

var Doctor = deepCopy(Chinese);

Fügen Sie nun dem übergeordneten Objekt ein Attribut mit dem Wert as hinzu ein Array. Ändern Sie dann dieses Attribut für das untergeordnete Objekt: 　

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

Zu diesem Zeitpunkt ist das übergeordnete Objekt nicht betroffen.

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

Derzeit verwendet die jQuery-Bibliothek diese Vererbungsmethode.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Vererbung von Javascript-Nicht-Konstruktoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!